3 column layout HTML/CSS

user_258400 0
Viewed 310292

I have the following HTML layout:

<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>

Any chance to arrange the columns like on the below sample grid without changing HTML using CSS only?

----------------------------------------------------
|              |                   |               |
| Column left  |   Column center   | Column right  |
|              |                   |               |
----------------------------------------------------
css html
5 Answers

CSS:

     .container div{
 width: 33.33%;
 float: left;
 height: 100px ;}

Clear floats after the columns

 .container:after {
 content: "";
 display: table;
 clear: both;}
user_63362790
Related