CSS float creating white space
# October 8, 2012 at 6:31 am
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
# October 8, 2012 at 6:34 am
Sorry sample code
[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]
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.# October 8, 2012 at 7:16 am
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.# October 8, 2012 at 7:24 am
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.
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.
You must be logged in to reply to this topic.