Menu
I have a wrapper <div> which contains two inner <div>s that are floating.
<div class="outside" style="border:1px solid #555;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
The problem is the wrapper <div> has width of 80px since two inner <div> are 40px each. But always the wrapper <div> is 0px in height which makes the border appear like a line at the top.
So I placed the two inner <div>s inside a <table>. It worked well. But how do I avoid this problem without going for a <table>?
811
It has zero height because the content inside it is floated. Floated elements are ignored when calculating the height of their parent. This can be easily solved. Setting its overflow property to "hidden" will force it to wrap around floated elements.
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.
This seems like the ideal candidate for transition from a table-based layout to a CSS layout. It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH attributes set, contain borders, etc.
A wrapper is an element, commonly a div, that encloses one or more other. elements in the HTML markup, e.g.: <div id="wrap"> <h1>Headline</h1> <p>Paragraph</p>
Set overflow: hidden on the parent.
<div class="outside" style="border:1px solid #555;overflow:hidden;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
