Vote count:
0
My problem is that my BODY section does not auto fit between the nav and social bar. The problem is that When you are minimizing your browser from left to right, the TEST div gets overlapped by the newsfeed bar and then goes off the screen. Is there anyway to prevent the test div from going under the newsfeed bar AND to stretch along with the browser frame as well? If you still do not see the problem, go check out the website yourself: http://ift.tt/1EANBY1
*{
margin:0px;
padding:0px;
}
#wrapper{
width:900px;
}
#header{
width:100%;
padding:5px;
float:left;
position:fixed;
background-color:black;
color:white;
text-align:center;
white-space: nowrap;
overflow: hidden;
}
#nav{
width:150px;
height:100%;
left:0px;
background-color:#B8B8B8;
margin-top:48px;
position:fixed;
text-align:center;
line-height:30px;
border:solid black 1px;
}
#body{
margin-top:70px;
margin-left:165px;
margin-right:165px;
background-color:red;
padding:200px;
float:left;
}
#newsfeed{
width:150px;
height:100%;
right:0px;
background-color:#B8B8B8;
float:left;
margin-top:48px;
position:fixed;
text-align:center;
line-height:30px;
border:solid black 1px;
}
#footer{
width:100%;
padding:5px;
position:fixed;
bottom:0px;
background-color:black;
color:white;
text-align:center;
white-space: nowrap;
overflow: hidden;
}
ul{
list-style:none;
}
a:visited{
color:black;
}
sup{
font-size:17px;
}
a:hover{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--
<script>
</script>
-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to the website!</h1>
</div>
<div id="nav">
<h2>Navigation</h2>
<hr />
<ul>
<u>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Legal</a></li>
</u>
</ul>
<hr />
<h2>Education</h2>
<hr />
<ul>
<u>
<li><a href="">Learn Assembly</a></li>
<li>Learn C++</li>
<li>Learn CSS</li>
<li>Learn Java</li>
<li>Learn JavaScript</li>
<li>Learn MySQL</li>
<li>Learn PHP</li>
</u>
</ul>
</div>
<div id="body">
<p>TEST DIV</p>
</div>
<div id="newsfeed">
<h2>Social</h2>
<hr />
<img src="img/fb.png" width="40px" height="40px">
<img src="img/twit.jpg" width="40px" height="40px">
<img src="img/g+.png" width="40px" height="40px">
</div>
<div id="footer">
<h5>Created by Boston Vanseghi</h5>
</div>
</div>
<!--
<script>
</script>
-->
</body>
</html>
asked 56 secs ago
Need help organizing my sections in css
Aucun commentaire:
Enregistrer un commentaire