3 Column Layout HTML/Css

3 column layout HTML/CSS

Something like this should do it:

.column-left{ float: left; width: 33.333%; }
.column-right{ float: right; width: 33.333%; }
.column-center{ display: inline-block; width: 33.333%; }

DEMO

EDIT

To do this with a larger number of columns you could build a very simple grid system. For example, something like this should work for a five column layout:

.column {    float: left;    position: relative;    width: 20%;      /*for demo purposes only */    background: #f2f2f2;    border: 1px solid #e6e6e6;    box-sizing: border-box;}
.column-offset-1 {    left: 20%;}.column-offset-2 {    left: 40%;}.column-offset-3 {    left: 60%;}.column-offset-4 {    left: 80%;}
.column-inset-1 {    left: -20%;}.column-inset-2 {    left: -40%;}.column-inset-3 {    left: -60%;}.column-inset-4 {    left: -80%;}

<div class="container">   <div class="column column-one column-offset-2">Column one</div>   <div class="column column-two column-inset-1">Column two</div>   <div class="column column-three column-offset-1">Column three</div>   <div class="column column-four column-inset-2">Column four</div>   <div class="column column-five">Column five</div></div>

Dynamic 3 Column Layout in HTML+CSS: Side Columns Equal & Maximal, Middle Column Minimal & Driving the Layout?

If you put the three divs in one container with 'display:flex' you can achieve what I think you're after.

Simply give 'left' and 'right' a 'width: 100%' so they stretch as far as they can with the same proportion and the middle one gets only as big as needed. (If you want another ratio at a different time - maybe the right one should be twice as big as the left - simply put 100% and 200% width - the width might be bigger than 100% and like that it's really easy to calculate the ratio)

Notice that if you have more than one word, the lines would break. To prevent this I put 'flex-shrink: 0' on the middle one (alternative would be 'white-space: nowrap'). If it's just one word or the line break is what you want, you can even leave these.

#wrapper {
  display: flex;
}

#wrapper>* {
  border: 1px solid teal;
}

.left,
.right {
  width: 100%;
}

#middle {
  flex-shrink: 0;
  /* white-space: nowrap; */
}

<div id="wrapper">
  <div class="left"></div>
  <div id="middle">two words</div>
  <div class="right"></div>
</div>

How to create a 3 column layout in css?

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

CSS grid make 3 column layout with children

Use flexbox:

.pagination{
  display: flex;
  gap: 10px;
}

.pagination a:first-child{
  margin-right: auto;
}

.pagination a:last-child{
  margin-left: auto;
}

<div class="pagination">
 <a>Prev</a>
 <a>1</a>
 <a>2</a>
 <span>...</span>
 <a>12</a>
 <a>Next</a>
</div>

How to create a 3-column responsive layout?

There are many ways to do it. First, you need to make the divs to display as columns for large screens, then use media queries to change them to rows for medium/small screens.

HTML for all:

<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

1. Flexbox:

JSFiddle

.container {
  display: flex;
}

.section {
  flex: 1; /*grow*/
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

2. Float:

JSFiddle

.container:after { /*clear float*/
  content: "";
  display: table;
  clear: both;
}

.section {
  float: left;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    float: none;
    width: auto;
  }
}

3. Inline block:

JSFiddle

.container {
  font-size: 0; /*remove white space*/
}

.section {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
    width: auto;
  }
}

4. CSS table:

JSFiddle

.container {
  display: table;
  table-layout: fixed; /*euqal column width*/
  width: 100%;
}

.section {
  display: table-cell;
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
  }
}

5. CSS grid:

JSFiddle

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
}

.section {
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    grid-template-columns: none;
  }
}

3 Column Layout HTML/Css