CODEWITHSUNDEEP
csscss-float
dk123
dk123

Reputation: 19690

css align vertically specific divs

I currently have the following html:

<div>objA</div>
<div class="tower">objB</div>
<div class="tower">objC</div>
<div class="tower">objD</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>

I'd like to tower(align vertically) the divs in class "tower" so that the following image can be reproduced:

"div-tower"

Instead, what I currently have is the following:

http://jsfiddle.net/kAMB5/

Are there any ways in which I could go about achieving my wanted result purely through css? (preferably without changing the html content)

UPDATE: You can assume these are fixed width divs.

Upvotes: 3

Views: 118

Answers (2)

FelipeAls
FelipeAls

Reputation: 22161

You need an extra div wrapping your .tower as in: http://jsfiddle.net/kAMB5/4/

Apart from that, CSS Grid Layout (IE10) or on your .tower CSS3 flexbox (still need a container I guess) could achieve the same result but with lesser compatibility

Upvotes: 1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

You need to put objC and objD divs inside objB div like this: DEMO to achieve desired result:

HTML:

<div>objA</div>
<div>
    objB
    <div class="tower">objC</div>
    <div class="tower">objD</div>
</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>

Upvotes: 3

Related Questions