Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make html floating elements take up space inside div

Tags:

html

margin

I have a floating <div> inside another <div>, the containing div has a black border...

problem is that the floating <div> doesn't actually take up the height that it is (about 600px) or so and so the containing <div> with the border ends up like 20 px tall with the border going straight through the inner div.

How do I make the inner div take up the space it's supposed to, while still having it float?

Here is my source:

<div style="border:1px solid black">
    <div style="float:left;height:200px;"></div>
</div>
like image 373
lightray22 Avatar asked Apr 16 '13 03:04

lightray22


People also ask

How do you float a div?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do you float middle in CSS?

There is no way to float center in CSS layout. So, we can center the elements by using position property.

What is float inherit?

Updated on July 1, 2020. CSS float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around it.


1 Answers

Using the micro-clearfix method:

<div style="border:1px solid black" class="cf"> 
  <div style="float:left;height:200px;"> 
  </div> 
</div>

CSS

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
  *zoom: 1;
}
like image 198
tom-19 Avatar answered Jan 04 '23 10:01

tom-19