CODEWITHSUNDEEP
csscss-position
alisonb
alisonb

Reputation: 21

Absolute positioning with 100% width

This question has been asked a bunch of times, but the solutions don't seem to be working for me. Perhaps because I am too dull to be able to apply simple solutions to my more "complex" situation.

I just need my content div below my header div, then the footer div below that, while using 100% width for the header and footer divs. This is in a WordPress site, hence extra fun divs. I've tried various overflow: hidden etc. I have a good grasp of the concept that absolute positioning takes the div out of the flow, just not sure how to fix this situation. I've also tried applying a top position to the content div, but that doesn't help the footer div.

Any help would be greatly appreciated. And if there is another way to do this, I'm all ears!

Please see this fiddle: http://jsfiddle.net/M8Wy6/1/

<div id="home-page-wrap">
    <div id="container">
            <div id="header">
                <div class="top-header">
                    <div id="logo">logo</div>
                    <div id="header-nav">header nav</div>
                </div>
                <div id="home-slider">slider</div>
                <div id="main-nav">main nav</div>                
            </div><!-- header -->

            <div id="content">
                 <div class="hentry">
                        <div id="side-bar">the sidebar</div>
                        <div class="entry-home">thecontent</div>
                </div>
                <div class="home-bottom">home bottom</div>
           </div>
           <div id="footer">footer</div>
    </div>
</div>​

body {background:#F2F2F2;}

#home-page-wrap {min-height:100%; height:auto !important; height:100%; width: auto; margin:0 auto; padding:0; background:#F2F2F2;}

#container {width:260px; min-height:100%; height:auto !important; height:100%; margin:0 auto; padding:0 40px; background:#F2F2F2;}

#header {float:left; height:50px; width:100%; left:0; position:absolute; margin:0 auto; padding:0; overflow:visible; background:#FFF;}

.top-header {width:260px; margin:0 auto; height:50px;}

#logo {float:left; position:relative; width:50px; height:25px; margin:0; padding:0; overflow:visible; border:2px solid red;}

#header-nav {float:right; display:block; height:25px; width:50px; padding:0; margin:0; color:#919395; border:2px solid red;}

#home-slider {float:left; width:100%; height:120px; margin:0 auto; background:#404040; border:2px solid red;}

#main-nav { float:left; display:block; width:100%; height:50px; margin:6px auto 6px; padding:0; z-index:100; background:#999; border:2px solid red;}

#content {width:260px; min-height:260px; height:auto !important; height:260px; padding:0; margin:0 auto; background:#F2F2F2; position:absolute; left:0; border:2px solid green;}

.hentry {width:260px; position:relative; margin:0 auto; overflow:hidden;}

.entry-home {float:left; width:100px; min-height:100px;height:auto !important;height:100px; margin:25px 0; padding: 20px 0 0 0;}

#side-bar {float:right; width:50px; min-height:100px; height:auto !important; height:100px; margin:25px; padding:0; background:#F2F2F2;}

#footer {width:100%; height:50px; padding:0; margin:0 auto; background:#666666; position:absolute; left:0; overflow:visible;}

​

Upvotes: 1

Views: 1990

Answers (1)

tuff
tuff

Reputation: 5163

I just need my content div below my header div, then the footer div below that, while using 100% width for the header and footer divs.

This is the default behaviour for divs: they will expand horizontally to fill their parent elements, and expand vertically to contain their children/content. So you can get what you want by removing absolute positioning, floats, and width properties on your header, footer, and content divs.

demo: http://jsbin.com/ibexuy/1/edit

Upvotes: 5

Related Questions