two nested divs side by side

Question

I know this has been asked a million times before, but I can't seem to crack it and I'm sure someone more experienced could spot my mistake much more quickly than I could work it out.

HTML: http://sas98.user.srcf.net/guestbuzz/index.php

CSS: http://sas98.user.srcf.net/guestbuzz/style.css

I'd like the right hand box to sit on the right hand side of the form but within the container so its right hand side is aligned with the right hand side of the nav bar.

Thanks very much in advance.

Here's [JS Fiddle](http://jsfiddle.net/), where [you can put *both* your HTML *and* your CSS together](http://jsfiddle.net/davidThomas/QJFGm/). Though please reduce the demo according to [SSCCE (Short, Self-Contained, Correct/Compilable, Example) principles](http://sscce.org/). — David Thomas, Jun 01 '12 at 22:22

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Understand the block model of a div. It will take the entire width available. this works:

.container {
    width: 1000px;
    margin: 0px auto;
    /*display:table;*/
    position:relative;
}

    #left {
        width: 600px;
        display:inline-block;
        /*float:left;*/
        position:absolute;
        left:0;
    }

    #right {
    background-color:rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
           -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
             -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
        width: 400px;
        border-radius: 3px;
        display:inline-block;
        /*float:right;*/
        position:absolute;
        right:0;
    }

Note that the commented lines are another way that would work.

What did I do?.

make container relative, so absolute positioned childs of this div, would position relative to this one.
~~make display:inline-block; the left and the right blocks, so it takes the necessary width and dont clear nor overlap each other.~~ This is not necessary if you set a width.
make right position to 0 to the right and left position 0 to the left.

UPDATE

I now think that the best approach is to trigger a block formatting context. Make #left float to the left and to #right, give it the propperty overflow:auto; or any other different than visible. In IE6 you need to trigger something called hasLayout so give to #right the propperty zoom:1;.

edited May 23 '17 at 11:56

Community

1
1

answered Jun 01 '12 at 22:18

Roger

2,912
2
31
39

Thanks for your answer, especially your explanation. It's very close to what I want, except for #background which doesn't extend vertically to accommodate its child elements. Is there anything that can be done to fix that? – Sebastian Jun 01 '12 at 22:26
@Sebastian You can do the commented approach, i'm looking what is going on with the second approach. Remember to comment the lines below the commented lines, they should not be mixing. – Roger Jun 01 '12 at 22:29
Perfect, thanks so much. One final thing: why does it play up when I add padding:5px to #right? – Sebastian Jun 01 '12 at 22:36
@Sebastian What do you mean exactly?, use jsfiddle as you were suggested and show me :D if i add it, it works fine. You can locate your problems with ease if you follow David Thomas suggestion with SSCCE. – Roger Jun 01 '12 at 22:45
So the jsfiddle doesn't display it exactly as my browser does, but here's the rough idea of what #right does: http://jsfiddle.net/QJFGm/2/ notice how it moves when you add and remove padding? – Sebastian Jun 02 '12 at 07:08

two nested divs side by side

1 Answers1