tags:

views:

29

answers:

1

Hi!

We're having a problem with a side pane that is floated to the right. This pane somehow resizes the first div in the main content, so the div is stretched to the same height as the pane, see illustration below.

The main div has the following css

margin: 10px 280px 0 10px;
padding-right: 50px;

The side pane has the following css

float: right;
width: 270px;
margin: 10px 10px 0 0;

What would make this happen? How can I fix it?

This error occurs in Firefox 3.6

css float bug

+1  A: 

Try adding overflow:auto to main div.

Sarfraz
It worked, and after I added padding-bottom the scrollbar disappeared :) Could you please explain, or point me to where this is described?
Znarkus
@Znarkus: http://www.quirksmode.org/css/clearing.html
Sarfraz
It doesn't really talk about this problem? Thanks anyway, I didn't know about that trick either
Znarkus
The fix only worked in Firefox sadly, it breaks in Webkit. Any idea on a remedy?
Znarkus
@Znarkul: You can target them with filters, see: http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/
Sarfraz