Hello

 

Basically I have 2 columns, a main one covering a majority of the width of the screen, then one floated right. When the right column has more in than the left one, it just carrys on without the content div wrapping it. Does anyone know how to do this?

 

<div id="container">
<div id="right">
More
</div>
<div id="content">
Less
</div>
</div>

 

#container {
background-color:#ffffff;
border:1px solid #cccccc;
color:#333333;
margin:20px 6%;
height:100%;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

#right {
float:right;
width:220px;
margin:2%;
margin-left:1%;
font-family:Arial, Helvetica, sans-serif;
font-size:0.78em;
background-color:#ffffff;
}

#content {
position:relative;
font:0.78em Arial, Helvetica, sans-serif;
border-right:1px solid #cccccc;
width:70%;
padding:3%;
}

 

Thank you

Try this:

 

HTML

<div id="container">

<div id="content">
<p>Less</p>
</div>

<div id="right">
<p>More</p>
</div>
<div class="clearFix"></div>
</div>

 

CSS

 

.clearFix{ line-height:0; font-size:0; clear:both; }

#container {
background-color:#ffffff;
border:1px solid #cccccc;
color:#333333;
margin:20px auto;
height:100%;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

#content {
position:relative;
font:0.78em Arial, Helvetica, sans-serif;
border-right:1px solid #cccccc;
width:70%;
margin-right:20px;
float:left;
}

#right {
float:left;
width:220px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:0.78em;
background-color:#ffffff;
}

That works great, thanks!

Just to clarify: Was this in IE?

Hi,

 

The above code will work great. You need to get a firm understanding of how floats work in CSS and XHTML.

 

Go here for an explanation.

 

And also here.

 

Hope this helps.