CODEWITHSUNDEEP
htmlcss
ggle
ggle

Reputation: 456

CSS - Parent div not acting as a parent

I am currently trying to pick up css. It's going okay so far, however I am having an issue I haven't had a problem with until now.

I have a <div> containing two further <div>'s. I expect the "parent" <div> to act as a parent (automatic height, etc.) and actually "contain" the two child <div>'s.

My code:

<div class="formpair">
    <div class="formlabel formitem">
        Parent Section:
    </div>
    <div class="formcontrol formitem">
        <select>

        </select>
    </div>
</div>

My CSS:

.formitem {
    position: relative;
    float: left;
}
.formlabel {
    width: 200px;
}
.formcontrol {
    position: absolute;
    left: 200px;
}
.formpair {
    clear: both;
    margin-bottom: 4px;
    height: auto;
    position: relative;
    display: block;
}

I have tried experimenting with "position" and "display" but to no avail... any help appreciated!

Upvotes: 0

Views: 1136

Answers (3)

maioman
maioman

Reputation: 18734

A modern trend to clear floats is to use pseudo elements on the container div:

in this way you reduce the markup an obtain the clearfix-result

 .container:after {
      content:'';
      display:table;
      clear: both;
   }

Moreover optimizing such technique you get to Nicolas Gallagher's micro-clearfix-hack

in this version you'll also find a :before pseudo element to avoid top-margins from collapsing.

This is the mainstream most popular solution!!

Upvotes: 0

draason
draason

Reputation: 48

Unless there is a specific need to have the child elements floated, I have provided a different solution using display:inline-block. I have also cleaned up your CSS to remove some unnecessary bloat that may cause hierarchy problems later in your document.

You can see a working example of the fix here: JSFiddle

Here is the css that works properly to display as you need it to:

.formitem {
    display:inline-block;
}

.formlabel {
    width: 200px;
}

.formpair {
    margin-bottom: 4px;
}

Here are a few of the problems you had with your previous CSS:

.formcontrol {
    position: absolute;
    left: 200px;
}

This piece of CSS was being countered by:

.formitem {
    position: relative;
    float: left;
}

And so .formcontrol was not having any effect on your document because of the countering CSS. The reason it was countered out is because CSS is linear and reads your document from start to finish. In your HTML you first told the CSS to apply .formcontrol and then immediately after you gave it the second class .formitem:

<div class="formcontrol formitem">

Other CSS declarations like:

height: auto;
position: relative;
display: block;

Did not seem to be needed in your example, as the default settings will work perfectly fine for this application, and imposed possible restricting declarations on your elements that could cause problems down the line with future CSS modifications.

If your intention was to use float:left, then @rdubya commented with this link on how to properly clearfix underneath floated elements: clearfix

Upvotes: 1

Stef
Stef

Reputation: 341

A parent container does not expand to the height of the floated child elements. The simplest way to do this way is to add a clearing div to clear the floating divs and get the parent to expand.

HTML

<div class="formpair">
    <div class="formlabel formitem">
        Parent Section:
    </div>
    <div class="formcontrol formitem">
        <select>

        </select>
    </div>
    <div class="clear"></div>
</div>

CSS add...

.clear {
  clear: both;  
}

http://codepen.io/anon/pen/ByzJbY

Upvotes: 0

Related Questions