Hello,
I want to make a default 2 columns web site layout. But I want to use different background colors for the menu and for the content area.
Is it anyhow possible to make the height of two div tags for the same? Or any other trick to make the "gray" are full along the "white" area?
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body{
background: #adb2bd;
margin: 0px;
padding:0px;
}
#menuback {
position:absolute;
background: #ccc;
width:100px;
text-align:top;
border: 0px solid #000;
border-left-width:1px;
border-right-width:1px;
}
#caption {
background: #fff;
padding-left:102px;
width:300px;
border: 0px solid #000;
border-right-width:1px;
text-align:top;
}
#content {
width:400px;
margin:auto;
margin-top:20px;
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<div id="menuback"><ul><li>menu</li><li>menu</li><li>menu</li></ul></div>
<div id="caption"><h2>Caption</h2><p>Some text here</p><p>And much more text</p>
<p>and text and text and text</p> <p>and text and text and so on...</p><p> </p></div>
</div>
</body>
</html>You'll like Faux Columns: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/This">http://www.alistapart.com/articles/fauxcolumns/This</a><!-- m --> sollution is nice but it seems as a small hack. And what happens if I want a border around the menu area? Is there any clean css way to solve the above mentioned problem?In a nut shell, if you want borders to be as long as the longest column, use background images and floated DIVs. One of my biggest frustrations with CSS is its lack of support for some sort of layout gridwork method, similar to tables only without the inherent meaning of what a table is -- and I'm a huge proponent of CSS design.
No HTML tag is related to another, except for the table tags. Two absolutely positioned DIVs, or two floated DIVs that appear side-by-side have nothing in common, other than they are contained by some other tag.
Faux Columns isn't a hack, as borders are technically decorative by nature whether you create them with images or with the CSS border property.
Now you can still use CSS borders, but they won't extend the full length of the page. I did come across a forum post a while back where someone used floats and negative margins and actually got two DIVs to be the same height, but he/she had fits trying to get it to work with Internet Explorer, as is always the case. As far as ease of implimentation goes, Faux Columns is your best choice.
I want to make a default 2 columns web site layout. But I want to use different background colors for the menu and for the content area.
Is it anyhow possible to make the height of two div tags for the same? Or any other trick to make the "gray" are full along the "white" area?
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body{
background: #adb2bd;
margin: 0px;
padding:0px;
}
#menuback {
position:absolute;
background: #ccc;
width:100px;
text-align:top;
border: 0px solid #000;
border-left-width:1px;
border-right-width:1px;
}
#caption {
background: #fff;
padding-left:102px;
width:300px;
border: 0px solid #000;
border-right-width:1px;
text-align:top;
}
#content {
width:400px;
margin:auto;
margin-top:20px;
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<div id="menuback"><ul><li>menu</li><li>menu</li><li>menu</li></ul></div>
<div id="caption"><h2>Caption</h2><p>Some text here</p><p>And much more text</p>
<p>and text and text and text</p> <p>and text and text and so on...</p><p> </p></div>
</div>
</body>
</html>You'll like Faux Columns: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/This">http://www.alistapart.com/articles/fauxcolumns/This</a><!-- m --> sollution is nice but it seems as a small hack. And what happens if I want a border around the menu area? Is there any clean css way to solve the above mentioned problem?In a nut shell, if you want borders to be as long as the longest column, use background images and floated DIVs. One of my biggest frustrations with CSS is its lack of support for some sort of layout gridwork method, similar to tables only without the inherent meaning of what a table is -- and I'm a huge proponent of CSS design.
No HTML tag is related to another, except for the table tags. Two absolutely positioned DIVs, or two floated DIVs that appear side-by-side have nothing in common, other than they are contained by some other tag.
Faux Columns isn't a hack, as borders are technically decorative by nature whether you create them with images or with the CSS border property.
Now you can still use CSS borders, but they won't extend the full length of the page. I did come across a forum post a while back where someone used floats and negative margins and actually got two DIVs to be the same height, but he/she had fits trying to get it to work with Internet Explorer, as is always the case. As far as ease of implimentation goes, Faux Columns is your best choice.