Positioning three columns on a HTML page using CSS

Question

I want to make a basic HTML/CSS Website with a header and three columns below it. But I am not getting a proper alignment. Please help me rectify my code.

    #menu_bar {
      width: 1346px;
      height: 60px;
      margin: 0px;
      padding: 0px;
      background-color: black;
    }
    ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    li {
      float: left;
      text-align: center;
      border: 4px black solid;
    }
    a:link,
    a:visited {
      display: block;
      width: 120px;
      color: #ffffff;
      height: 30px;
      padding: 10px;
      background-color: #4169e1;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
    }
    a:hover {
      background-color: #000080;
    }
    #icon {
      border: none;
    }
    #first_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: grey;
    }
    #second_col {
      float: left;
      width: 60%;
      height: 708px;
      background-color: green;
    }
    #third_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: yellow;
    }

<div id="layout">
  <div id="menu_bar">
    <ul>
      <li id="icon">
        <img src="blue.jpg" height="60" width="104">
      </li>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Profile</a>
      </li>
      <li><a href="#">Messages</a>
      </li>
      <li><a href="#">Logout</a>
      </li>

    </ul>
  </div>

  <div id="first_col">

    <p>hello</p>

  </div>

  <div id="second_col">

    <p>post here</p>

  </div>

  <div id="third_col">

    <p>friends</p>

  </div>
  <div>

The output in the browser comes like this

Screenshot 1

Screenshot 2

And please help me remove that space before the first column.

Just a suggestion. When you write <div id="first_col"><p>hello</p></div> you end up with a box in a box: the <p> is inside the <div> and you can simply remove the inner wrapper and just have <div id="first_col">hello</div> You only need a wrapper if you have 2 or more inner contents. — frenchie
– frenchie, Commented Jan 16, 2015 at 13:28
I was having more inner contents but I removed them for the simplicity of the question. @frenchie — TheHardRock
– TheHardRock, Commented Jan 16, 2015 at 13:38
Remove the floats from your columns and add display:inline-block; vertical-align:top; and then make sure there is no whitespace between them. — Waxi
– Waxi, Commented Jan 16, 2015 at 13:46

Community · Accepted Answer · 2017-05-23 10:26:44Z

2

It looks like the box with hello is positioned in line with the box with the "Blue" img inside it.

use the css clear property to seperate the first_col div from the menu_bar div

so your css declaration for first_col would look like this:

 #first_col
{
    clear: left;
    float:left;
    width:20%;
    height:708px;
    background-color:grey;
}

The css clear property

left - No floating elements allowed on the left side

As pointed out by others you will need to remove the margin-leftfrom the other two columns to make them appear next to each other.

so you end up with declarations for second_col and third_col that look like this:

#second_col
{
    float:left;
    width:60%;
    height:708px;
    background-color:green;
}

#third_col
{
    float:left;
    width:20%;
    height:708px;
    background-color:yellow;
}

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jan 16, 2015 at 13:34

user2985029

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

3 Comments

Ruan Mendes Over a year ago

You still need to remove the margin from the floating elements

TheHardRock Over a year ago

how do I set the height of any column so that it remains till the end of the page or the end of the text in that column? @9205892

user2985029 Over a year ago

if you dont require the columns to all be the same height as the content inside them increases then you can use min-height instead of height, that way the column starts off with a height and then can grow with the content

Vivek Maru · Accepted Answer · 2015-01-16 13:32:23Z

0

you can wrap your all three div with an another div like this

 <div id="wrapper">
    <div id="first_col">
      <p>hello</p>

    </div>

    <div id="second_col">

      <p>post here</p>

    </div>

    <div id="third_col">

      <p>friends</p>

    </div>
</div>

then you can set height of width of wrapper div manually as you required.

answered Jan 16, 2015 at 13:32

Vivek Maru

8,5291 gold badge29 silver badges35 bronze badges

Comments

nifCody · Accepted Answer · 2015-01-16 13:59:39Z

just add position:fixed in your css id menu_bar

#menu_bar {
      width: 1346px;
      height: 60px;
      margin: 0px;
      padding: 0px;
      background-color: black;
  position:fixed;
    }
    ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    li {
      float: left;
      text-align: center;
      border: 4px black solid;
    }
    a:link,
    a:visited {
      display: block;
      width: 120px;
      color: #ffffff;
      height: 30px;
      padding: 10px;
      background-color: #4169e1;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
    }
    a:hover {
      background-color: #000080;
    }
    #icon {
      border: none;
    }
    #first_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: grey;
    }
    #second_col {
      float: left;
      width: 60%;
      height: 708px;
      background-color: green;
    }
    #third_col {
      float: left;
      width: 20%;
      height: 708px;
      background-color: yellow;
    }

<div id="layout">
  <div id="menu_bar">
    <ul>
      <li id="icon">
        <img src="blue.jpg" height="60" width="104">
      </li>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Profile</a>
      </li>
      <li><a href="#">Messages</a>
      </li>
      <li><a href="#">Logout</a>
      </li>

    </ul>
  </div>

  <div id="first_col">

    <p>hello</p>

  </div>

  <div id="second_col">

    <p>post here</p>

  </div>

  <div id="third_col">

    <p>friends</p>

  </div>
  <div>

Michael Irigoyen · Accepted Answer · 2015-01-16 14:52:08Z

0

Remove the margin-left on #second_col and #third_col.

edited Jan 16, 2015 at 14:52

Michael Irigoyen

23.1k18 gold badges93 silver badges132 bronze badges

answered Jan 16, 2015 at 13:28

Thomas Frei

1417 bronze badges

Collectives™ on Stack Overflow

Positioning three columns on a HTML page using CSS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related