CSS float not working
After carefully researching a way to fix this, I still haven't found the answer I'm looking for. I finally decided to post my problem on stackoverflow.com because I am finally giving up trying to find an answer. As a result, I get two boxes with content on top and one box at 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>
source to share
The problem is with your addition as mentioned above.
Here is a fiddle with the removal and the colors added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
source to share
The problem with your code is that your class .box
is assigning a width of 33%, with additional padding. This results in an overall width of over 100%. Padding is added to the initial width .box
because this is how the default window model works in CSS.
To fix this problem, add this line to your style declarations .box
:
box-sizing: border-box;
You can see a live demo here . If you want to know more about the box, this article by Chris Coyer is a great reference.
source to share
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so be sure to add it to your html.
What you are probably expecting is that the float does not wrap to the next line because the padding is added to the size of the width (items are greater than 33%). Instead, you need to set the window size attribute in 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>
source to share