3

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.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
knalpiap
  • 67
  • 1
  • 7
  • Would it be okay to create a sidebar div and put the headlines and quote in there? – AlexMA Apr 10 '12 at 21:00
  • Question: is keeping the order of elements in HTML a must? because this is easily doable if you do something like ` – poncha Apr 10 '12 at 21:00
  • My ISP won't let me visit postimage, so I can't see your pictures. In the future, I suggest you create a pared-down testcase on JSFiddle.net – Phrogz Apr 10 '12 at 21:03
  • @AlexMA & @poncha; Thanks for your replies. The reason to have this order is that i'm creating a responsive website. When a visitor has a lower resolution, the visible order should be: 1. Aside#quote 2. Article#intro 3. Section#thumbs 4. Aside#headlines If i can't tackle this problem now, i'll find it again at lower resolutions... @Phrogz; Thanks for the tip!! – knalpiap Apr 11 '12 at 06:48
  • @knalpiap I may still be missing the point, and my apologies if this is irrelevant, but have you seen http://www.getskeleton.com/ ? – AlexMA Apr 11 '12 at 12:18
  • Not irrelevant at all! I've downloaded my rough templates via http://www.initializr.com/ – knalpiap Apr 11 '12 at 14:35

4 Answers4

2

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!

Community
  • 1
  • 1
jacktheripper
  • 13,953
  • 12
  • 57
  • 93
  • Thanks, I'd have to dig into this. I've seen it before but not sure how it would work with responsive design. – knalpiap Apr 11 '12 at 06:52
1

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.

somdow
  • 6,268
  • 10
  • 40
  • 58
  • Thanks for your effort, but this would still force me to change the order of elements... I want to keep these semantically correct. Thanks though! – knalpiap Apr 11 '12 at 06:49
  • What do you mean change the order of the elements? if you want your layout as you described above, this IS the solution, essentially your creating 3 new wrapper divs, to wrap your current elements in, and if you want to HTML5 them, then make them your parent asides etc but nothing changes as far as your current box layouts. Plus nothing un-semantic about it. PLUS since it says "dynamic heights" then this will still adjust accordingly to whatever is being bought it dynamically...so i dont understand why you wouldnt use it. Anyways, either way Good luck to you – somdow Apr 11 '12 at 10:56
  • Thanks for reply, again, but in my source, not all left-floating elements are placed after one another... Maybe another solution could be to wrap only the right-floats, so it will become a single object. – knalpiap Apr 11 '12 at 12:32
0

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!

knalpiap
  • 67
  • 1
  • 7
-1

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

idrumgood
  • 4,904
  • 19
  • 29