This is probably very simple but I'm trying to figure the best way to achieve having mulitple columns in a box that automatically expand to the allow for the text in the left and right collumns, they are currently overflowing from the content into the footer.
Basically, the "content_left" & "content_right" text are supposed to be in the brown box with the content text. Do I need to use clearing somewhere?
Is using floats the best way for this? If so, what would happen if I wanted to add more columns?
Any help or advice would be greatly appreciated... Here's my HTML:
Code:
<body>
<div id="wrapper">
<div id="content">
<p>content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text </p>
<div id="content_left">
<p>left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text </p>
</div>
<div id="content_right">
<p>right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text </p>
</div>
</div>
<div id="footer">
<p>footer text footer text footer text</p>
</div>
</div>
</body>
...and the css:
Code:
* {
margin: 0;
padding: 0;
}
#wrapper {
margin:0px auto;
margin-top:25px;
width:950px;
position:relative;
border:none;
}
#content {
background-color:#663300;
}
#content_left {
color:red;
width:45%;
float:left;
}
#content_right {
color:blue;
width:45%;
float:right;
}
#footer {
background-color:yellow;
}
Last edited by alfandango : 04-15-2008 at 02:56 PM.
|
