CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 23

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.

Upvotes: 2

Views: 5089

Answers (3)

Tom Eberhardt-Smith
Tom Eberhardt-Smith

Reputation: 110

There are a couple ways to accomplish what you want.

Method 1: Float and width

Assign a single column class

.column {    
    width: 33.3%;
    float: left;
}

Markup three divs with said class

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

Method 2: Inline block

Sometimes floats aren't the best option. You cna also set the display property to inline-block, although this can sometimes leave unwanted gaps in between the divs.

.column {    
    width: 33.3%;
    display: inline-block;
}

Same HTML markup

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

Method 3: Flexbox

Flexbox according to Chris Coyier of CSS-tricks:

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

.row {
    display: -ms-flex: // Vendor prefixes required for flexbox
    display: -webkit-flex; 
    display: flex:
}
.column {    
    width: 100px;
    display: -ms-inline-flex;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

Add the parent div to your HTML markup

<div class="row">
   <div class="column">Column 1</div>
   <div class="column">Column 2</div>
   <div class="column">Column 3</div>
</div>

Cool thing about flexbox is you don't need to fill the space using set percentages, it can space your columns out with justify-content: space-between;

There is a lot more to delve into with flexbox. Floats are very simple but since you mentioned building a UI, something like flexbox will give you a wider array of tools to work with.

Upvotes: 1

Kode.Error404
Kode.Error404

Reputation: 573

Alternatively, you could style them all at once without giving a class as mentioned by Jek. If you are using styling within the html, you could do this in the header:

<style> div{ width:100px } </style>

You could do the same if you are using an external stylesheet. However, if you have to style the divs in different manners using class and id would be a better option. If all divs are styled in the same way, simply style the tag, which is div in your case.

Upvotes: 0

Jack Hales
Jack Hales

Reputation: 1644

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! :)

Upvotes: 1

Related Questions