Div not nesting in parent div as expected

BeccaT · Share | #1 (**permalink**) 08-08-2012, 07:42 AM

This should be so simple but for the life of me it is elusive. I can't seem to get the "logo" and "nav" divs to display nested in the "wrap-header" div. My goal is to have a fluid outer div (container-header) and fixed width inner wrapper div "wrap-header". Using an element inspector shows that the "logo" or "nav" divs are outside of and below the "container" and "wrap" header divs.

Insight much appreciated.

Code:

</head>
    <body>
            <div id="container-header">
                <div id="wrap-header">
                    <div id="logo">
                        <a href="#"><img src="images/logo.png" title="#" alt="#"></a>
                    </div><!-- logo -->
                    <div id="nav">
                        <ul>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">What We Do</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div><!-- nav -->
                </div><!-- wrap-header -->
            </div><!-- container-header -->
<snip>

#container-header, #container-main {width:100%;}
#container-band, #container-foot {width:100%; clear:both;}
#wrap-header, #wrap-band, #wrap-main, #wrap-foot {width:999px; margin:0px auto;}
#wrap-header {padding-top:10px; }
#logo, #nav {height:auto; background:#e0e0e0;}
#container-header {background:#e0e0e0;}
#container-band {background:blue;}
#wrap-band {text-align:right; clear:both; border:0; height:20px; margin:0px auto 0px; padding:2px 20px 0px 0px;}
#container-main {background:white;}
#logo {float:left; margin:0px 0px 0px -10px;}

BeccaT · #2 (**permalink**) 08-08-2012, 08:41 AM

Just put an example up for visuals. Unfortunately I can't post links (yet) so hope an image will help. To elaborate a bit more -- I'm attempting to generate a full width soild BG for the header area. Will probably be doing the same elswhere on the page but as soon as I can get the idea of what I'm missing the rest should be a snip.

Cheers!

**J. H. Rasmussen** · #3 (**permalink**) 08-08-2012, 09:04 AM

If i understand the question correct, maybe this css code will help:

Code:

#wrap-header div{ display: inline-block; }

BeccaT · #4 (**permalink**) 08-08-2012, 09:53 AM

Thanks ever so much J. H. Rasmussen!

Added via your suggestion:

Code:

#wrap-header {display:inline-block;}

along with a bit of centering code and she works like a charm. Now I'm going to spend some time to "fully" understand inline/block/inline-block.

Cheers!