Geek asks and answers

Alignment of float of different heights

I'm having difficulty 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 aside#headlines. When I rearrange section#thumbsit aside#headlinesin HTML, everything looks fine, but it will not be semantically correct, especially because I have to reuse this code on multiple pages.

+3
source share
4 answers

Binding the right floats into one right floating div, while keeping the individual left floats, solved the problem for me!

The end result looked something 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!

0
source

CSS. - , - div display: block. , float, jQuery Masonry Plugin.

, !

+2

, , ... , .

, , , , FIRST , , .

, , , , , , . ,

( )

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

css . FLOAT (markef LEFT-) ( RIGHT-)

, / / , eachother, , <br/>.

, , , MAIN-, , , "" eachother, / , (, ) lol.

. , oldschool tables lol. , , , .

.

, , 100% , .

+1

div , .

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

[]

-1

More articles:


All Articles