overflow-x isn't working

Discussion in 'CSS' started by wtf321, Apr 8, 2012.

0
  1. #1 
    <div style="overflow: scroll; width:300px; border: 1px solid black;">
    <div style="background-color: whitesmoke; width:100px; float:left;">jap    </div>
    <div style="background-color: whitesmoke; width:100px; float:left;">jap    </div>
    <div style="background-color: whitesmoke; width:500px; float:left;">jap    </div>
    <div style="background-color: whitesmoke; width:500px; float:left;">jap    </div>
</div>
    Code (markup):
    I want all whitesmoke "jap" boxes in one line, with a horizontal scrollbar
     
    wtf321, Apr 8, 2012 IP
  2. Singular

    Singular Member

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #2
    You need a container to define the total width of your floated elements. Here is a quick fix that should work:

    <div style="overflow: scroll; width:300px; border: 1px solid black;">
    <div style="width:1200px">
    <div style="background-color: whitesmoke; width:100px; float:left;">jap</div>
    <div style="background-color: whitesmoke; width:100px; float:left;">jap</div>
    <div style="background-color: whitesmoke; width:500px; float:left;">jap</div>
    <div style="background-color: whitesmoke; width:500px; float:left;">jap</div>
    </div>
    </div>
     
    Singular, Apr 10, 2012 IP