2

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.

4
  • 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
    Jan 16, 2015 at 13:28
  • I was having more inner contents but I removed them for the simplicity of the question. @frenchie Jan 16, 2015 at 13:38
  • jsfiddle.net/bsz3gnu7/2
    – user2985029
    Jan 16, 2015 at 13:40
  • 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
    Jan 16, 2015 at 13:46

4 Answers 4

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;
}
3
  • You still need to remove the margin from the floating elements Jan 16, 2015 at 13:35
  • 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 Jan 16, 2015 at 13:55
  • 1
    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
    – user2985029
    Jan 16, 2015 at 14:02
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.

0

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>

0
0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.