Menu
I’m trying to put together a page that is split into three sections. I can’t figure out a way to set the width’s of my three sections to fill up the whole screen with giving them an exact size (ex. width:250px?. I thought I could set them by using %’s but it doesn’t seem to be working for me. I guess the main issue is that the layout is going to display differently on my 19 inch WS monitor than it will on a 17 or 15 inch. So how can I get it to display on the whole screen regardless of the size of the viewers monitor.
If you need a link to view the site let me know, if not heres my code:
HTML:
[CODE]
<body>
<div id=”wrapper”>
<ul id=”list”>
<li><div id=”left”>
left column is green<br>
</div></li>
<li><div id=”middle”>
middle column is blue
</div></li>
<li><div id=”right”>
right column is orange
</div></li>
</ul>
</div>
</body>
CSS:
[CODE]
body {
text-align: auto;
background-color:black;
color:white;
}
#wrapper {
height:100%;
width:100%;
margin:0 auto;
border:1px solid red;
}
#wrapper ul
{
border: 0px none;
margin: 0;
padding: 0;
list-style-type: none;
}
#wrapper ul li
{
float:left;
padding: 0;
margin: 0;
}
#left {
width:30%;
border:1px solid green;
}
#middle {
width:50%;
border:1px solid blue;
}
#right {
width:20%;
border:1px solid orange;
}