ansaurus

Question

Content in floated divs causes div below to drop

Answer 1

A:

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.)

Richard 2010-01-10 06:18:54

Yes, that is the heart of the problem, and your HTML example works well. The only issue is that I don't know how to achieve this with the WordPress loop...as in, how to add the <br class="clearFix"/> at the beginning of each row dynamically?

orbit82 2010-01-10 06:50:54

I'm not familiar with WordPress... could you include an example of the "WordPress loop"?

Richard 2010-01-10 14:55:59

I got it working, spent a bit of time fiddling with the PHP. Thank you SO much for your help, Richard. The problem occurred because I was adding a float at the end of every element, when the float needed to be at the end of each row, like in your example. Thanks again and if you lived near me I'd buy you a drink! :-)

orbit82 2010-01-11 21:49:04

Answer 2

A:

I apologize if this answer doesn't help as I have never used WordPress. But if you are able to use jQuery on your site take a look at the jQuery Masonry plugin. It allows you to vertically float elements and I think would solve the problems you are having.

fudgey 2010-01-10 07:13:42

Answer 3

A:

It looks like there is a syntax error. You forgot to close the class attribute:

<div class="entry_column>

joshli 2010-01-10 08:27:39

Answer 4

A:

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.

LeguRi 2010-01-11 14:53:53

Answer 5

A:

Thanks for all of your answers everyone. I got it working!

orbit82 2010-01-11 21:49:32

ansaurus

tags:

views:

answers:

Content in floated divs causes div below to drop

related questions