CODEWITHSUNDEEP
htmlcss
Erik Ellasandre
Erik Ellasandre

Reputation: 45

CSS float is not working

After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom. Here is the CSS code:

#content_area
{
    overflow: hidden;
    display: inline-block;
    background: white;
    margin-top: 20px;
    margin-right: 110px;
    margin-left: 110px;
    margin-bottom: 20px;
}

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
    padding: 15px;
}

Here is the HTML Code:

<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>

Upvotes: 3

Views: 441

Answers (3)

Sami Fouad
Sami Fouad

Reputation: 375

The problem is your padding, as mentioned above.

Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
}

Upvotes: 2

TheIronDeveloper
TheIronDeveloper

Reputation: 3624

From what I can tell, your floats are working correctly.

Your html was missing the id attribute, so make sure to add that to your html.

What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article

* {
    box-sizing:border-box;
}

#content_area
{
    overflow: hidden;
    display: inline-block;
    background: white;
    margin-top: 20px;
    margin-right: 110px;
    margin-left: 110px;
    margin-bottom: 20px;
}

.box
{
    display:inline-block;
    width: 33.33%;
    float: left;
    background: #FFFFFF;
    padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>

Upvotes: 0

cizmic
cizmic

Reputation: 65

The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.

To fix this problem, add this line to the .box's style declarations:

box-sizing: border-box;

You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.

Upvotes: 0

Related Questions