Content in floated divs causes div below to drop
Question
I'm displaying WordPress posts horizontally using floated divs. I've got it working fine, but when the divs move to a new row, if the paragraph text inside each floated div is too long, the div immediately below it drops. Furthermore, each floated div is affected by the length of the divs above it.
How do I make them flow naturally without being affected by the heights of those above them?
Here is my HTML for a single floated div:
<div class="entry_column>
<div class="entry">
<h2>Entry title</h2>
<p>Entry excerpt...if this text gets too long, the div immediately
below it gets pushed WAY down</p>
</div>
</div>
<br class="clearFloat" />
And here are the relevant CSS classes:
.entry_column {
float: left; width: 50%;
}
.entry_column .entry {
margin-right: 25px;
}
.clearFloat {
clear: both;
height:0;
font-size: 1px;
line-height: 0px;
}
I tried everything I could think of for the clearing, but if I try to add clearing directly on the floated divs, I still can't get it to stop dropping.
Hopefully the image explains this issue a bit better. The "More Music" box drops all the way down because of the length of the "Music Post Stand" div above it.
3 answers
solution1
0 2010-01-10 06:18:54
So the heart of your problem is that "This is Just Going To... Test Post" should be up against the far left, under "A music post stand"?
Try including the <br class="clearFloat" /> only at the end of a row of entry_columns, so in the screenshot you'd include it only in between "Another fun post" and "This is Just Going To... Test Post"
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.entry_column {
float: left; width: 100px;
}
.entry_column .entry {
margin-right: 25px;
}
.clearFloat {
clear: both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="entry_column">
<div class="entry">
<h2>Entry title</h2>
<p>
Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down.
Repeated to make it long:
Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down
</p>
</div>
</div>
<div class="entry_column">
<div class="entry">
<h2>Entry title</h2>
<p>Entry excerpt...</p>
</div>
</div>
<br class="clearFloat" />
<div class="entry_column">
<div class="entry">
<h2>Entry title</h2>
<p>New row of Entries</p>
</div>
</div>
<div class="entry_column">
<div class="entry">
<h2>Entry title</h2>
<p>Entry excerpt...</p>
</div>
</div>
<br class="clearFloat" />
</body>
</html>
(... at which point you should instead remove the <br /> and assign those entry_columns which are at the beginning of a row an additional class, and target that class with a CSS rule giving it the 'clear:both;' property.)
solution2
0 2010-01-10 08:27:39
It looks like there is a syntax error. You forgot to close the class attribute:
<div class="entry_column>
solution3
-1 2010-01-11 14:53:53
If you can't add elements you could try using a CSS 3 nth-child selector to say 'clear every 5th entry_column. (for rows 5-entries wide)
.entry_column:nth-child(5n+0)
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo
It just may not be as cross-browser friendly as you need.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.