HTML / CSS: Issues Creating Three Columns

Question

I created three columns spread across 90% of the width page width and also centred on the page using "margin: auto". I wanted to have the three columns of equal width with equal spacing in between but was unable to achieve my desired result. How would I ago about doing this?

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
        height: 100%;
        width: 90%;
        margin: auto;
    }

    .c1 {
        float: left;
        width: 30%;
        height: 70%;
        background-color: green;
    }

    .c2 {
        float: right;
        width: 30%;
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        float: right;
        width: 30%;
        height: 70%;
        background-color: yellow;
    }




<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

Steve Hartley · Accepted Answer · 2016-02-21 02:35:14Z

3

You can use flex box to easily achieve this, here is the css for the desired result which also keeps it fully responsive.

here is a more detailed explanation on flex box and what you can achieve

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
        height: 100%;
        width: 90%;
        margin: auto;
		display:flex;
		justify-content:space-between;
    }

    .c1 {
        
        width: 30%;
        height: 70%;
        background-color: green;
    }

    .c2 {
        
        width: 30%;
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        
        width: 30%;
        height: 70%;
        background-color: yellow;
    }

<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

edited Feb 21, 2016 at 2:35

answered Feb 21, 2016 at 2:24

Steve Hartley

7455 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Hartley Over a year ago

The justify-content:space between sets the two outer divs against the sides of the container and spaces the middle one evenly.

Sahil · Accepted Answer · 2016-02-21 02:28:00Z

You can remove float and make them as inline-block, and then center the elements present in the ColumnContainer.

html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
     height: 100%;
     width: 90%;
     margin: auto;
     text-align: center;
    }
    .ColumnContainer > div{
      display:inline-block;
      width:30%;
    }
    .c1 {
        height: 70%;
        background-color: green;
    }

    .c2 {
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        height: 70%;
        background-color: yellow;
    }

<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

Collectives™ on Stack Overflow

HTML / CSS: Issues Creating Three Columns

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related