Divs not floating properly [closed]
I have a parent div, and it houses a bunch of child divs. One of those is floated left, but the rest are floated right. It worked fine when only a few of the divs were floated right, but I've since added more and the results appear like this:
![Divs not floating properly [closed]](https://i.stack.imgur.com/Xfrpi.png "Divs not floating properly [closed]")
Light green is parent div background, other colors are the divs in question. A few actually float correctly for some reason, but green should be after the blue, and the pink after the red.
I have overflow: hidden; on the parent-most div, and the height has no affect on this child-div behavior.
How should I fix this?
Here's the relevant CSS:
#reviews {
background-color: #16ff21; //green
float: right;
text-align: left;
text-indent: 40px;
width: 40%;
height: 150px;
}
#rating {
background-color: #ff114b; //red
float: right;
width: 40%;
text-align: center;
font-size: 200%;
height: 150px;
}
#validFor {
background-color: #19ceff; //blue
float: right;
width: 40%;
text-align: center;
font-size: 200%;
height: 150px;
}
#stats {
background-color: #ffe8e5; //pink
width: 40%;
float: right;
vertical-align: middle;
text-align: center;
font-size: 250%;
}
Here's the parent div of all that up there:
#description {
text-align: left;
width: 100%;
}
And the parent div of #description:
#main {
background-color: #d3ffd3;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
padding: 10px;
width: 75%;
text-align: center;
overflow:hidden;
}
Add clear: right; for all but the first div that you want to be flush with the right border. Otherwise, if there's width for them, multiple right-floated divs will hunch up next to each other on the same line.
I think you need to clear:both so that the floats appear one under the other
Have you added "clear:left or clear:both" to the ones floated right? I may not be understanding the question completely. Post your code somewhere and Ill take a look, could also be due to the XHTML structure. Also, not sure if it's in your real code but // is a js comment. /*comment*/ is css
EDIT*** just use a .clear {clear:both;} and apply it to each child div. works fine for me. Code below:
.clear{clear:both;}
.clear {clear: both;}
<body>
<div id="main">
<div id="validFor" class="clear"></div>
<div id="reviews" class="clear"></div>
<div id="rating" class="clear"></div>
<div id="stats" class="clear"></div>
</div>
</body>
</html>
If I understand your question, you have trouble positioning your div with "float". You should note this case: assume you have 4 div which are:
[div 1][div 2][div 3][div 4]
[div 1]: float left
[div 2,3,4]: float right
The effects will show:
[div 1][div 4][div 3][div 2]
It's because the CSS style the element from left to right, and the div who is "lefter" takes priority. Hope this helps.
加载中,请稍侯......
精彩评论