CODEWITHSUNDEEP
htmlcss
stack over
stack over

Reputation: 55

Float Left not working for div blocks

Does anyone know why the float:left isn't working? Basically, I have a div with class=boxscore_first, which is in the correct position. Then I have two more divs with class=boxscore which are appearing on top of the first. I want them to appear in sequence to the right of the first one. I want them to all float next to each other..

HTML

<div id="menu">
    <div id="scoreboard"></div>
    <div class="boxscore_first"></div>
    <div class="boxscore"></div>
    <div class="boxscore"></div>
</div>

CSS

.boxscore_first {
    width:60px;
    height:60px;
    background-color:red;
    margin-top:-60px;
    margin-left:13px;
    float:left;
}

.boxscore {
    width:60px;
    height:60px;
    background-color:blue;
    float:left;
    margin-top:-60px;
    margin-left:13px;
}

Upvotes: 0

Views: 72

Answers (1)

matewka
matewka

Reputation: 10148

Actually, according to HTML you provided, you have three boxes. Left one and right one are .boxscore_first and the middle one is .boxscore.

Another and more relevant thing is that the .boxscore_first is a div. That means it's a block element. It doesn't float. In other words it wants to be alone in the line. You have to make both .boxscore_first and .boxscore float: left.

Upvotes: 1

Related Questions