How to create a 3 column layout in css? - html

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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.