Horizontal scrollbar not showing up

Update: i was using overflow-x (it is just that my question was wrong)

The horizontal scrollbar should开发者_如何学C show in this case, but does not

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:300px">abc </div>
  <div style="float:left; width:300px">abc </div>
  <div style="clear:both"></div>
</div>

How do i use the div overflow in this case?

---

To answer your question, your child divs will not cause an overflow of the parent div. Your current design will not cause an overflow of the parent because both children are set with float:left

It seems like you are assuming that the children will be stacked horizontally; turn float off and put them in a table of width 600px in adjacent cells and see what that does.

Also note that the CSS overflow property is highly browser-dependent. Some browsers use overflow:scroll and some use overflow:auto.

---

If you want a horizontal scrollbar then you need to use overflow-x: scroll;. Also the inner children div have to be wider than the parent div for the scrollbars to work. So your code will look as follows:

<div style="overflow-x:scroll; width:400px">
  <div style="float:left; width:450px">abc </div>
  <div style="float:left; width:450px">abc </div>
  <div style="clear:both"></div>
</div>