Expand div with floating children to their full height

Question

UPDATE: The problem has been solved using the code provided by Pradeep, specifically the "clearfix" code. I asked this question in search of a way of keeping my wrapper <div> behind all of my content, i.e. extend its height to the full height of all its children, and considered using a moving <div> where in reality my problem was fully discussed in "What is a clearfix?" and in CSS clearfix demystified.

Essentialy my container <div> had floating elements within that were expanding past the bottom of my wrapper. I wanted the wrapper to be behind all of my content so that users could read the text that was on top. Applying this new CSS class clearfix to my wrapper <div> the problem was solved but a new one created. I lost the ability to center the <div> on the page, which I did not state in my original question below. The solution to being able to center it again without losing the "clearfix" solution was to use a parent <div> that has margin-left: auto and margin-right: auto set. See CSS clearfix how to over come the inability to center an element using it

The Origional Question:

http://jsfiddle.net/L7TKx/

I want my <div> to move with the page as the user scrolls down the page.

I have seen answers on this site as well as others stating that you need to add the postion:fixed property but when I do this, my div which was centered on the page is now left aligned and the scroll bar disappears, so you cannot view the rest of the content. I'm looking for a fix that keeps the scroll bar and as the user scrolls, the <div> follows.

See http://www.rustdome.hfbsite.com/ I want that off white background to follow behind the text as the user scrolls.

I have the following and have experimented with position:fixed but that disables the scroll bar.

#wrapper {
    min-width: 740px;
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: hsla(30,100%,97%,0.69);
    height: 100%;
}

html {
    min-height: 100%;
    position: relative;
}

body {
    height: 100%;
}

I did not know what jsfiddle was so I googled and here is mine http://jsfiddle.net/L7TKx/ though the output they provide does not look like my browser render. Seems the .clearfix css code provided by pradeep below worked with the exception of centering which I am trying to fix. — , Mar 05 '14 at 04:41
What Pradeep's CSS changes is that the height of the `
` with the id `#wrapper` expands to the height of its children. It's unrelated to scrolling or fixed positioning. So if that is what you want, then your question doesn't seem to cover that. — Sebastian Zartner, Mar 05 '14 at 10:36
I think that you are correct, what I wanted was for this off white div to contain all of my content, but instead it was too short in length and some floating elements like my sidebar were extending beyond as well my text content was longer. I began thinking of ways to solve this and thought I needed to make the div follow as you scroll and thus my question was born but after reading about clearfix it seems this is in fact what I want. I am unsure if I should edit my above question or start a new one but the problem now is that I cannot center the div on the page with clearfix applied. — , Mar 06 '14 at 02:54

Sebastian Zartner · Answer 1 · 2014-03-06T06:09:08.337

1

Instead of using position:fixed you'll probably want to use background-attachment:fixed. This will just make the background fixed while the text keeps being scrollable.

Regarding Pradeep's code you could also have used a simpler approach. You just needed to add this rule to your CSS:

#wrapper::after {
   content: "";
   display: block;
   clear: both;
   height: 0;
}

edited Mar 06 '14 at 06:09

answered Mar 04 '14 at 06:52

Sebastian Zartner

18,808
10
90
132

background-attachment: fixed is a property I have been using already as it works great with my background image, but the problem I have is with a div I added to the page. – Mar 05 '14 at 04:34

score 1 · Accepted Answer · answered Mar 04 '14 at 06:54

1

You can try below code:

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

Above css add in your css file..and Add "clearfix" class in your main div(wrapper).

Good luck...

answered Mar 04 '14 at 06:54

Pradeep Pansari

1,287
6
10

This code just about did it but everything is left aligned, I am experimenting with the properties to see if I can make it centered. I will do some searching as I dont understand what .clearfix is or how it works but seems to have done the trick expcept for the alignment – Mar 05 '14 at 04:32
I ended up using this code and adding a another wrapper around wrapper, see my edited question – Mar 06 '14 at 03:14
You can remove ".clearfix {display: inline-block;}" this.. May be it will help you.. – Pradeep Pansari Mar 06 '14 at 07:40

score 0 · Answer 3 · answered Mar 04 '14 at 06:44

You will probably want it to be a separate div entirely from the one that houses your content. I am assuming the #wrapper is the off-white thing you want to move around, and I'd try something like bellow.

HTML:
<html>
<body>
     <div id="wrapper"></div>
     <div id="content">
        Your Content
     </div>
</body></html>
CSS:
#wrapper {
    min-width: 740px;
    max-width: 1000px;
    width: 100%;
    position: fixed;
    left: 50%;
    margin-left: 500;
    background-color: hsla(30,100%,97%,0.69);
    height: 100%;
    z-index: -1;
}
#background {
    z-index:-2;
}

I just tryed using this code and it half works, with the exception of the div is not center aligned on the page and some of my other elements followed it such as my header and nav. So its right aligned. — , Mar 05 '14 at 04:21

Expand div with floating children to their full height

3 Answers3