3

I have these two div

<div id="newUpContainer" style="width:100%">
    <div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">

the inside div has table, which has a height of almost 560px.

I am using firebug and Google Chrome to check the size of the parent div.

but I got that the size is 0. Although the child div has a table as you see in this picture

enter image description here

what should I do to make the content of the inside div exit in the parent div ?

Ajay
  • 2,022
  • 19
  • 33
Marco Dinatsoli
  • 10,322
  • 37
  • 139
  • 253
  • When you float an element, it takes it out of the "flow" of the page such that it doesn't "take up any space". [This page](http://css-tricks.com/all-about-floats/) has more information on how floats work. It also goes over how to solve this issue, and general problems you may have with floats. – Zhihao Mar 25 '14 at 15:13
  • @Zhihao thanks for the link. but please could you give an answer or a hint to solve it? – Marco Dinatsoli Mar 25 '14 at 15:17
  • Have a look at this: http://complexspiral.com/publications/containing-floats/ and then a solution can be found by using a _clearfix_ which you can read about here: http://stackoverflow.com/questions/8554043/what-is-clearfix - This should get you started on a solution. – David Reid Mar 25 '14 at 15:32

2 Answers2

0

Probably because all elements within your div have been floated. When all child elements are floated, the element appears to take up no space at all. There are a couple of tricks you can use if you want to work around this behavior.

You can use the following:

div#myDiv { overflow: hidden; }

The second, and more popular method is the clearfix hack.

A few CSS frameworks include a .clearfix class that you can apply to such elements, such as Twitter bootstrap.

Prajjwal
  • 1,055
  • 2
  • 10
  • 17
0

its because of the float:right of child div.. refer the http://mytactics.blogspot.com/2014/03/parent-div-height-zero0-even-child-div.html

if you remove the float property from child div it will work as you want. it will show the proper height..

but what about if you want to float the child div to right as well as height of parent div??

you need to set the overflow:hidden on parent div..

on existing code you just need to set the overflow:hidden on newUpContainer. and good to go..

<div id="newUpContainer" style="width:100%;overflow:hidden;">
    <div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">

thats it.. :)

check the link

Deepak Sharma
  • 4,124
  • 1
  • 14
  • 31