CODEWITHSUNDEEP
htmlcss
tessiof
tessiof

Reputation: 117

Basic HTML Layout

I'm trying to implement a simple layout, closely represented like this:

 _________________________
|     |   header    |     |
|  L  |_____________|  R  |
|     |             |     |
|     |             |     |
|     |             |     |
|     |    main     |     |
|     |             |     |
|     |             |     |
|     |             |     |
|_____|_____________|_____|

I've developed this code to accomplish my objective:

<!DOCTYPE html>
<html>
<head>
    <title>Layout</title>
<style>

    * {
        margin: 0px;
        padding: 0px;
    }
    p {
        text-align: center;
    }
    div#left {
        float: left;    
        background-color: #777;
        width: 200px;
        height: 650px;
    }
    div#header {
        float: left;    
        background-color: #eee;
        width: 940px;
        height: 60px;
    }
    div#main {
        float: left;    
        width: 940px;
    }
    div#right {
        float: right;   
        background-color: #777;
        width: 200px;
        height: 650px;
    }
</style>
</head>

<body>
    <div id="left">
        <p>Left</p>
    </div>

    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>

    <div id="right">
        <p>Right</p>
    </div>
</body>

But I can't get the 'right' column to stay aligned with the top. Can someone point me what to change in my CSS to correct this? Thanks!

Upvotes: 4

Views: 592

Answers (3)

Rick Donohoe
Rick Donohoe

Reputation: 7281

To achieve correct, cross-browser compatible, float layouts, it is important you correctly order elements. To achieve this you should always have floated elements appear BEFORE non-floated elements.

You must also prioritize vertical layout too, for example if the header in your example was going to spread across the full width of the page, this would come before any floated elements which follow it.

Upvotes: 1

Bob
Bob

Reputation: 1497

John Conde answer is correct. But to help you visualize the change change your widths to percentage and you'll see what he means. :)

    <!DOCTYPE html>
    <html>
    <head>
       <title>Layout</title>
    <style>

      * {
       margin: 0;
       padding: 0;
      }
      p {
       text-align: center;
      }
      div#left {
       background-color: #777777;
       float: left;
       height: 650px;
       width: 15%;
      }
      div#header {
        background-color: #EEEEEE;
        float: left;
       height: 60px;
       width: 70%;
      }
      div#main {
       float: left;
       width: 70%;
      }
    div#right {
      background-color: #777777;
      float: right;
      height: 650px;
      width: 15%;
    }
    </style>
    </head>

    <body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <p>Right</p>
    </div>
    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>
    </body>

Upvotes: 2

John Conde
John Conde

Reputation: 219914

Move the right column to the top of your HTML:

<body>

    <div id="right">
        <p>Right</p>
    </div>

    <div id="left">
        <p>Left</p>
    </div>

    <div id="header">
        <p>Header</p>
    </div>

    <div id="main">
        <p>Main</p>     
    </div>
</body>

Upvotes: 10

Related Questions