Ok, I REALY hate asking this because I know its been asked over and over again. But, I'm having a hard time getting a simple 2 column CSS layout. I've looked at several examples here (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=FrontPage">http://css-discuss.incutio.com/?page=FrontPage</a><!-- m -->) but can't modify any exactly to what I want to do. Here is what I have rigth now and would just like to expand from this.
<style type="text/css">
<!--
body { margin: 0px; }
#head { /* To space out some stuff not in this example */
clear: both;
overflow: hidden;
background-color: #CCCCCC;
}
#side {
border: 1px solid red;
float: left;
max-width: 200px;
position: relative;
width: 200px;
}
#body {
border: 1px solid red;
position: absolute;
left: 200px;
right: 0px;
}
#footer {
background-color: #CCCCCC;
clear: both;
overflow: hidden;
}
-->
</style>
<div id="head">Head</div>
<div id="middle">
<div id="side">Side</div>
<div id="body">Body</div>
</div>
<div id="footer">Footer</div>
It looks great in Firefox but IE only has the width of the body to what it needs, not the entire width of the window. I've did some coloring to help see the boxs. Take a look at what I've got here (<!-- m --><a class="postlink" href="http://www.stma.k12.mn.us/_test.html">http://www.stma.k12.mn.us/_test.html</a><!-- m -->). ThanksTry
#body {
border: 1px solid red;
margin-left: 200px;
right: 0px;
}or this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin: 0px; }
#head { /* To space out some stuff not in this example */
clear: both;
overflow: hidden;
background-color: #CCCCCC;
}
#side {
border: 1px solid red;
float: left;
width: 200px;
}
#body {
border: 1px solid red;
}
#footer {
background-color: #CCCCCC;
clear: both;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="head">Head</div>
<div id="middle">
<div id="side">Side</div>
<div id="body">Body</div>
</div>
<div id="footer">Footer</div>
</body>
</html>Dang it, I've worked on your suggestions for like 5 hours and couldn't figure out why they looked ok but didn't work in my design. After trying to expand from your examples I discovered an error on my part. The BODY comes before SIDE. Arg, so the suggestions don't work. LOL Is there a way to do this in reverse? Or should I just switch the two around? I was trying to keep the body to the top because of accessibility stuff. Thanks!Also, I set a background image to MIDDLE for a "side bar" effect. However, when the SIDE is longer than BODY it only displays the image the length of BODY. I know this is a floating issue. Is there a workaround to that too?
Fixed this, I just needed to put some clearing/spacer stuff in.
<style type="text/css">
<!--
body { margin: 0px; }
#head { /* To space out some stuff not in this example */
clear: both;
overflow: hidden;
background-color: #CCCCCC;
}
#side {
border: 1px solid red;
float: left;
max-width: 200px;
position: relative;
width: 200px;
}
#body {
border: 1px solid red;
position: absolute;
left: 200px;
right: 0px;
}
#footer {
background-color: #CCCCCC;
clear: both;
overflow: hidden;
}
-->
</style>
<div id="head">Head</div>
<div id="middle">
<div id="side">Side</div>
<div id="body">Body</div>
</div>
<div id="footer">Footer</div>
It looks great in Firefox but IE only has the width of the body to what it needs, not the entire width of the window. I've did some coloring to help see the boxs. Take a look at what I've got here (<!-- m --><a class="postlink" href="http://www.stma.k12.mn.us/_test.html">http://www.stma.k12.mn.us/_test.html</a><!-- m -->). ThanksTry
#body {
border: 1px solid red;
margin-left: 200px;
right: 0px;
}or this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin: 0px; }
#head { /* To space out some stuff not in this example */
clear: both;
overflow: hidden;
background-color: #CCCCCC;
}
#side {
border: 1px solid red;
float: left;
width: 200px;
}
#body {
border: 1px solid red;
}
#footer {
background-color: #CCCCCC;
clear: both;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="head">Head</div>
<div id="middle">
<div id="side">Side</div>
<div id="body">Body</div>
</div>
<div id="footer">Footer</div>
</body>
</html>Dang it, I've worked on your suggestions for like 5 hours and couldn't figure out why they looked ok but didn't work in my design. After trying to expand from your examples I discovered an error on my part. The BODY comes before SIDE. Arg, so the suggestions don't work. LOL Is there a way to do this in reverse? Or should I just switch the two around? I was trying to keep the body to the top because of accessibility stuff. Thanks!Also, I set a background image to MIDDLE for a "side bar" effect. However, when the SIDE is longer than BODY it only displays the image the length of BODY. I know this is a floating issue. Is there a workaround to that too?
Fixed this, I just needed to put some clearing/spacer stuff in.