CSS float creating white space

[Sunny]

I have three divs first and second have width 60% and are floated left third has width 30% floated right.
IE7 works fine the third div appears from the top of the page. latest browsers floats element besides the 2nd div.

I cannot change the order of the divs as its created through CMS.

and have access only to CSS.

Sample code looks like this

[Sunny]

Sorry sample code
[html]
[body]
[div style=”float:left; width:60%; height:100px; background:red”][/div]
[div style=”float:left; width:60%; height:100px; background:green”][/div]
[div style=”float:right; width:30%; height:100px; background:blue” position:relative; top:0][/div]
[/body[
[/html]

I do not want the gap at the top and want the third div to start from the top of the page but on right side.

[Sunny]

I want the first 2 divs to be below one another and only the third one to float to right

[Paulie_D]

Try this.

http://codepen.io/Paulie-D/pen/CkLel

[Sunny]

Thanks Paulie , but my bad… I should have explained the whole scenario.
Currently I am using position absolute to overcome this problem. However I have another major issue now with my right red div having so much content that its height exceeds beyond both left divs. This is fine, but I then have a footer below group div which overlaps the right red div in the middle of the page.

[Paulie_D]

If you can’t change the order or content of the divs, you’re pretty much scr*wed then.

However, assuming that the left div heights aren’t going to change height though you could try something like this.
http://codepen.io/Paulie-D/pen/EIxgD

None of this is elegant. Sometimes though there is only so much you can do with CSS.

If the page HTML no longer fits the design, it’s time to change the HTML.

[wolfcry911]

Your code above shows fixed height. Do any of the divs actually have a fixed height on the page (first or second div in particular)?

[Paulie_D]

I assumed that was the case. I would be interested in seeing the actual page.

We might be trying to solve the wrong problem.

[Sunny]

Sorry, the heights are not fixed, but that was just used as a sample

the problem is that the combined height of 1st and 2nd div is less than the 3rd div which is positioned absolute.

[Sunny]

Anyway thanks Paulie, the help is much appreciated.

[Sunny]

I got a solution for this, so thought of putting it across, just in case if someone needs it later.

I removed the float for third div and gave a margin-left to it.

code sample below:
http://codepen.io/anon/pen/gBJyk

[Author]

Posts