Grow your CSS skills. Land your dream job.

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
    [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.

    # October 8, 2012 at 6:50 am

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

    # October 8, 2012 at 7:01 am

    Try this.

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

    # 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.
    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.

    # October 8, 2012 at 8:05 am

    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)?

    # October 8, 2012 at 8:10 am

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

    We might be trying to solve the wrong problem.

    # October 8, 2012 at 8:11 am

    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.

    # October 8, 2012 at 8:13 am

    Anyway thanks Paulie, the help is much appreciated.

    # October 9, 2012 at 5:39 am

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".