Question

I feel like an idiot right now. Anyway – the page has three columns. The right and left are fixed width and must remain so. I need for the center column to resize on browser window resize. I know I know, this shouldn’t be tough, but it’s just not happening for me. Heres the html:

<div class="bottom_content">

<div class="left_col">

<p>Keeping up with Commpro.Biz</p>

<div class="s_n_icons">

<img src="images/facebook.png" alt="facebook" />

<img src="images/flickr.png" alt="flickr" />

<img src="images/twitter.png" alt="twitter" />

<img src="images/youtube.png" alt="youtube" />

</div>

<p>User Name:<input ="text" size="20" name="username" value="" /></p>

<p>Password:<input ="text" size="20" name="password" value="" /></p>

<input type="button" value="submit" name="submit" />

<p><a href="#">Forgot Username or Password?</a>

<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p>

<div id="twitter"></div>

</div>

<div class="center_col">

<p>What's Hot on Commpro.Biz</p>

<div class="hot_item">
hot item hot item hot item hot item hot item hot item hot itemhot item hot item
</div>

</div>

<div class="right_col">

<p>Our Partners</p>

<img src="images/BW.jpg" alt="Warren Buffett" />

<img src="images/IR_PRNewswire.gif" alt="newswire" />

<img src="images/Sysomo.gif" alt="Sysomo" />

</div>

<div id="footer">
    <p>Copyright 2011 by CommproBiz</p>
</div>
</div>

and the .CSS

.left_col{
float:left;
width:190px;
height:auto;
padding-right:5px;
}

.center_col{
float:left;
width:auto;
padding:0 10px;
}

.hot_item{
width:auto;
background-color:red;
}

.hot_item a{
text-decoration:none;
}

.hot_item img{
float: right;
vertical-align: top;
}

.right_col{
float:right;
width:250px;
height:auto;
padding-left:5px;
}

.right_col img{
margin:5px;
}

What’s happening is that with little content in the center col, the three columns behave. Once more than a certain amount of content gets into it, it falls below the left column and the right column goes drops down.

Answer 1

If you float an element you have to specify a width. If you don’t then there is no specified way the browsers should behave, so every browser might act differently.

What you could do is give the cols a width in percentages, so e.g. left is 10% middle 70% and right 20%.

If you want fixed width for right en left col. You should move the html of right-col above center-col. Then in the css you should remove the float on center-col and give it a margin-left:195px; and margin-right:255px;