So.. I've been attempting to move from a table-based layout to a pure CSS layout. I think I've been doing alright, but I am by no means a CSS Expert. I'm now having a problem with column widths. I have one column that has a fixed width and another next to it that I want to be dynamic so that it stretches with the page & covers whatever is left.
I have three <div>s
1) top_bar A horizontal bar on the top.
2) left_bar For a navigation menu on the left of the page that is 180 pixels wide.
3) content_bar For content which I would like to take up the rest of the page.
There is an 8px wide margin on the entire page.
Here's my CSS
div#top_bar {
background: none;
text-align: center;
padding: 0px;
border: 1px solid;
margin: 0px;
}
div#left_bar {
position: absolute;
top: 190px;
width: 179px;
background: white;
}
div#content_bar{
left: 200px;
top: 190px;
border: 1px solid;
text-align: left;
padding: 10px 10px 10px 10px;
margin-right: 8px; /*for use on 'auto'*/
width: 77%;
background: white;
}
I realize there is an inherent problem when mixing a static width and a dynamic width. I would like to know if there is any way around this without resorting to JavaScript and tables.
Any thought would be GREATLY appreciated =)
Thanks!!Something like this?
<html>
<head>
<title>oo</title>
<style>
#left_bar ul
{
list-style-type: none;
line-height:15px;
font-size:12px;
padding: 0;
margin-left: 10px;
}
#container{
width:90%;
background-color:#FFF;
border:1px solid #000;
margin:auto;
}
#top_bar {
background: none;
text-align: center;
padding: 0px;
border: 1px solid #000;
margin: auto;
border:1px solid #000;
width:90%
}
#left_bar {
float:left;
padding-right:10px;
width:15%
}
#content_bar{
float:left;
width:80%;
padding-left:10px;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>
<body>
<div id="top_bar">This is the head section</div>
<div id="container">
<div id="left_bar">
<ul>
<li>cat</li>
<li>dog</li>
<li>mouse</li>
<li>hores</li>
</ul>
</div>
<div id="content_bar">lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>This might be worth a look: <!-- m --><a class="postlink" href="http://bluerobot.com/web/layouts/layout1.htmlThanks">http://bluerobot.com/web/layouts/layout1.htmlThanks</a><!-- m --> for your responses, both of you!
Little Guy:
That's very similar to what I'm looking to have, except I want the left column to be a fixed width and it to encompass the entire page. I noticed that you have a "clear" class. From what I understand that's supposed to fill out an empty <div>.
I had tried using my left colum as width:absolute and my center column width:auto, but the <div> doesn't extend to the end of the page like I want it to. I tried the "clear" class idea and it worked in IE but not Firefox. Not sure what I need to do to fix that.
NogDog:
That's exactly what I'm looking for!
Thanks both of you!
I have three <div>s
1) top_bar A horizontal bar on the top.
2) left_bar For a navigation menu on the left of the page that is 180 pixels wide.
3) content_bar For content which I would like to take up the rest of the page.
There is an 8px wide margin on the entire page.
Here's my CSS
div#top_bar {
background: none;
text-align: center;
padding: 0px;
border: 1px solid;
margin: 0px;
}
div#left_bar {
position: absolute;
top: 190px;
width: 179px;
background: white;
}
div#content_bar{
left: 200px;
top: 190px;
border: 1px solid;
text-align: left;
padding: 10px 10px 10px 10px;
margin-right: 8px; /*for use on 'auto'*/
width: 77%;
background: white;
}
I realize there is an inherent problem when mixing a static width and a dynamic width. I would like to know if there is any way around this without resorting to JavaScript and tables.
Any thought would be GREATLY appreciated =)
Thanks!!Something like this?
<html>
<head>
<title>oo</title>
<style>
#left_bar ul
{
list-style-type: none;
line-height:15px;
font-size:12px;
padding: 0;
margin-left: 10px;
}
#container{
width:90%;
background-color:#FFF;
border:1px solid #000;
margin:auto;
}
#top_bar {
background: none;
text-align: center;
padding: 0px;
border: 1px solid #000;
margin: auto;
border:1px solid #000;
width:90%
}
#left_bar {
float:left;
padding-right:10px;
width:15%
}
#content_bar{
float:left;
width:80%;
padding-left:10px;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>
<body>
<div id="top_bar">This is the head section</div>
<div id="container">
<div id="left_bar">
<ul>
<li>cat</li>
<li>dog</li>
<li>mouse</li>
<li>hores</li>
</ul>
</div>
<div id="content_bar">lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
lots of stuff<br>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>This might be worth a look: <!-- m --><a class="postlink" href="http://bluerobot.com/web/layouts/layout1.htmlThanks">http://bluerobot.com/web/layouts/layout1.htmlThanks</a><!-- m --> for your responses, both of you!
Little Guy:
That's very similar to what I'm looking to have, except I want the left column to be a fixed width and it to encompass the entire page. I noticed that you have a "clear" class. From what I understand that's supposed to fill out an empty <div>.
I had tried using my left colum as width:absolute and my center column width:auto, but the <div> doesn't extend to the end of the page like I want it to. I tried the "clear" class idea and it worked in IE but not Firefox. Not sure what I need to do to fix that.
NogDog:
That's exactly what I'm looking for!
Thanks both of you!