Home/ Questions/Q 7817863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:23:03+00:00

ANyone know a good tutorial on how to to use css+html to define a

  • 0

ANyone know a good tutorial on how to to use css+html to define a layout similar to FB?

I am looking for a good example on how to have a header that is 100% and then a middle column as a body that is about 700px wide with one column on each side.

Updated:

I am not trying to understand CSS layout with div. Just trying to see if there is one way or common a way to do it

I am interested to know (using FB as an exmaple) .. how they are able to have those horizontal backgrounds and then have their content lined up in three columns or it is lined up in the middle.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the HTML:

    <html>
<head>
<link rel="styleSheet" href="style.css" type="text/css">
</head>
<body>
    <div id="header">Hello</div>
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
    <div id="sidebar-right">Right</div>
</body>
</html>

    and this is the css:

    body, html{
    width:      100%;
    height:     100%;
    margin:     0;
    padding:    0;
}

#header{
    width:      100%;
padding-left:   200px;
    height:     50px;
    background: #0000FF;
}

#sidebar{
    float:      left;
    width:      200px;
    height:     100%;
    background: #FF0000;
}

#content{
    float:      left;
    width:      700px;
    height:     100%;
    background: #00FF00;
}

#sidebar-right{
    margin-left:900px;
    height:     100%;
    background: #FFFF00;
}
    • 0