CODEWITHSUNDEEP
htmlcssalignmentcss-float
knalpiap
knalpiap

Reputation: 67

Aligning floats of different heights

I'm having difficulties controlling the vertical alignment of my floats.

My current situation looks like this: current

My desired alignment would be this: desired

Hence the vertical alignment of aside#headlines. When I swap section#thumbs and aside#headlines in the HTML everything looks fine, but that wouldn't be semantically correct, especially because I have to reuse this code throughout multiple pages.

Upvotes: 3

Views: 2165

Answers (4)

knalpiap
knalpiap

Reputation: 67

Wrapping the right floats into a single right floating div, whilst keeping the left floats separate, solved the issue for me!

The end-result looked somewhat like this:

<aside id="quote" class="float_left">
  blabla
</aside>

<div class="float_right">

  <article id="intro">
    blabla
  </article>

  <section id="thumbs">
    blabla
  </section>

</div>

<aside id="headlines">
  blabla
</aside>

Thanks again!

Upvotes: 0

somdow
somdow

Reputation: 6318

I know its a bit tought but look at how i handle this...and yes it CAN be done.

Well if i understand you correctly, then do what i do, FIRST create a main wrapper that wraps it all, that wraps all your content.

Then, instead of floating the separate items, wrap each if your boxes above in their own column wrappers if you will, and then float those. so for example

(pseudo code coming)

<div id="MAINwrapper>//THIS wraps all your content
<div id="mainLEFTwrapper">//float this left
   <div one></div>
   <div two></div>
</div>
and THIS wraps your divs that float to the right
<div id="mainMID/RIGHT wrapper>//float this left or right
   <div 3></div>
   <div 4></div>
</div>
</div><!-- main wrap ender -->

then the css is simple. FLOAT left for the first set(markef above as LEFT wrapper), and float right for the second set.(marked as RIGHT wrapper)

Now, since your inner column content/elements are now wrapped within their respective left/right column wrappers, they fall under eachother and you can seperate their height either with margins or simple <br/> tags.

Then to finish off, make sure you give the MAIN wrapper, a min-width that totals your two inner column wrappers widths so that they dont "float" under eachother when the screen / document window is less than the main wrappers width(hence the floats) lol.

and thats it. i try to treat situations like this, like oldschool tables lol. if you think about what i explained above like rigid tables, then you'll understand it better.

good luck.

if you need further help, holler, but this im 100% sure WILL work.

Upvotes: 1

idrumgood
idrumgood

Reputation: 4934

You'd have to wrap them in divs for the columns, then float the columns.

<div style="float:left">
   <div id="quote">blah</div>
   <div id="headlines">blah</div>
</div>
<div style="float:right">
   <div id="intro">blah</div>
   <div id="thumbs">blah</div>
</div>

[edited] misunderstood the questions

Upvotes: -1

jacktheripper
jacktheripper

Reputation: 14239

You cannot do that with CSS. Breaking floats is a common issue, the best way to do it is scrapping the floats altogether and using divs with display: block. However, if you really want to use floats check out the jQuery Masonry Plugin.

I'm sorry there's no neater answer!

Upvotes: 2

Related Questions