Problem with hiding floating divs inside parent div

Question

So, I am trying to hide floating divs in the parent div, but it does not work ... My code: CSS:

div.scrollarea { overflow: scroll; width: 400px; float: left; } div.td { float: left; width: 100px; height: 20px; background-color: red; } 

HTML:

  <div class="scrollarea"> <div class="td">x1</div> <div class="td">x2</div> <div class="td">x3</div> <div class="td">x4</div> <div class="td">x5</div> </div> 

So what I get: (failed to load images due to spam prevention, so here is the link) http://i.stack.imgur.com/I0cH1.png

And I want to get to get all .td on the same line where the horizontal scroll will be displayed.

Thanks,

Answer 1

To hide the elements inside their parent, you will need to make the relative parent element positioned and absolute children, and then use z-index to hide the children of the parent element something like this:

 #parentID{ position: 'relative'; /* required */ /* more needed styles */ } #child_element{ /* or class here instead of id */ position: 'absolute'; /* required */ z-index:-99; /* reqyured */ /* more needed styles */ } 

To display children, you need to set their z-index property to any value greater than 0

Answer 2

This is how floating elements behave when they do not fit, they click until they fit (which may not always be in the very left corner of the next "line", if not everything above has the same height, but this is not a problem in your example )

If you want them all to be on the same line, you must make sure that they are all contained in an element that preserves the width for each of them on the same line:

 <div class="scrollarea"> <div style="width: 500px;"> <div class="td">x1</div> <div class="td">x2</div> <div class="td">x3</div> <div class="td">x4</div> <div class="td">x5</div> </div> </div>