CODEWITHSUNDEEP
htmlcsslayout
user3125757
user3125757

Reputation: 5

Creating a 3-column vertical layout?

I'm trying to create a three column vertical layout, to do it horizontally isn't hard:

Live horizontal example: http://jsfiddle.net/NQU9u/

But for vertically, I tried the opposite of that code:

 <div style="width:100%; height :100%;  background-color:Lime;">
    <div style="width:33%; height:100%; background-color:Blue;">
    a
    </div>
    <div style="width:34%; height:100%; background-color:Gray;">
    b
    </div>
    <div style="width:33%; height:100%; background-color:Aqua;">
    c
    </div>        
</div>

sadly this does NOT work.

Any help/suggestions?

Upvotes: 0

Views: 320

Answers (1)

fabio_vac
fabio_vac

Reputation: 614

<div style="width:100%; height :100%;  background-color:Lime;">
    <div style="width:34%; height:100%; background-color:Blue; float:left;">
        a
    </div>
    <div style="width:33%; height:100%; background-color:Gray; float:left;">
        b
    </div>
    <div style="width:33%; height:100%; background-color:Aqua; float:left;">
        c
    </div>        
</div>

Upvotes: 1

Related Questions