Jonathan Jonathan - 2 years ago 157
CSS Question

How to create a 3 column layout in css?

I have been trying to make a complex UI for my program and I wanted to be able to have 3 columns using css in my design.

This is currently my code:

<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>

But this, for some reason, will display 3 different lines of stuff.

I have tried to change some things but it didn't seem to work at all

I just want there to be 3 columns on the same block.

Jek Jek
Answer Source

If you want to have 3 differnet areas on the screen, the effective method for doing that would be:

<style> .third { width: 33.33%; float: left; } </style>

<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>

The class="third" is adding the css that is inside of the {}'s that I have made. - Meaning that each of the div's are given the width: 33.33% (1/3 of the screen) and a float: left which will just move the areas to be able to move out of the normal CSS and HTML scope of stacking on top of each other.

Hope this helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download