CODEWITHSUNDEEP
csshtmlcss-float
Hcabnettek
Hcabnettek

Reputation: 12928

CSS Container DIv Height. Floating DIV questions

Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?

HTML:

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS:

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;  
    padding:3px;  
}

div#parent div:first-child
{
    float:left;
}

Upvotes: 7

Views: 11014

Answers (5)

Jose
Jose

Reputation:

I use the clearfix class.

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

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

then just use the class in every floated-element container.

Upvotes: 3

kmiyashiro
kmiyashiro

Reputation: 2249

This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.

First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).

Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.

First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.

Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.

  1. You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
  2. The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.

Upvotes: 7

Eric Wendelin
Eric Wendelin

Reputation: 44349

By the way, you want

div#parent > div { float:left; }

instead of

div#parent div:first-child { float:left; }

which is still not IE6 friendly, but it will float both child DIVs.

Upvotes: 1

janhartmann
janhartmann

Reputation: 15003

I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:

#container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

 

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>

Upvotes: 1

Sampson
Sampson

Reputation: 268354

#container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>

Upvotes: 1

Related Questions