Simple 2 column CSS layout

最新推荐文章于 2024-10-01 23:20:42 发布

vic78

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量932

点赞数

分类专栏： Web 文章标签： layout css div structure browser xhtml

本文链接：https://blog.csdn.net/vic78/article/details/328573

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

This is a tutorial on how to use CSS to create a simple two column layout. The layout also has a header, a horizontal navigation bar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout.

1. Basic structure

First of all, we create the basic HTML structure:

<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>

After that, we put some content in the different sections:

<div id="wrap">
    <div id="header"><h1>Document Heading</h1></div>
    <div id="nav">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            ...
        </ul>
    </div>
    <div id="main">
        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="sidebar">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            ...
        </ul>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

Now we have a completely unstyled XHTML document which is structured in a way that lets us use CSS to control its layout.

View step 1.

2. Adjust <body>

To make the content reach the edges of the browser window, we set the <body> element’s margin and padding to zero. We also specify colours for text and background.

body {
    margin:0;
    padding:0;
    background-color:#A7A09A;
    color:#000;
}

View step 2.

3. On to the main containers

After that it’s time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap. We also give it a background colour to make it show up on the page.

The method we use to center the content is based on the fact that when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window. To avoid problems that can occur in some browsers when the window is narrower than #wrap We set the <body> element’s min-width to the same value as the width of #wrap.

body {
    margin:0;
    padding:0;
    background-color:#A7A09A;
    color:#000;
    min-width:750px;
}
#wrap {
    background:#99c;
    margin:0 auto;
    width:750px;
}

After that, we give the different sections of the document different background colours to make them show up.

#header {
    background-color:#ddd;
}
#nav {
    background-color:#c99;
}
#main {
    background-color:#9c9;
}
#sidebar {
    background-color:#c9c;
}
#footer {
    background-color:#cc9;
}

View step 3.

4. Place the columns side by side

To make the two columns display side by side we use a combination of float and margin. We also specify the widths of the columns.

#main {
    background-color:#9c9;
    float:left;
    width:500px;
}
#sidebar {
    background-color:#c9c;
    width:247px;
    margin-left:500px;
}
html>body #sidebar {
    width:250px;
}

Note that the width of #sidebar is first set to 247px to work around IE/Win’s three-pixel-margin bug. We then use a child selector, which IE/Win doesn’t understand, to give the correct width to better browsers.

This will make #sidebar appear to the right of #main, but the footer is not where it should be.

View step 4.

5. Push the footer down

The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow, which makes elements that appear further down in the XHTML code end up where they would have been if the floated element wasn’t there at all. In this case #footer will disregard #main and start right below #sidebar.

To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.

#footer {
    background-color:#cc9;
    clear:both;
}

View step 5.

6. Fix the background colour

No we can see that the shorter column doesn't continue all the way down to the footer. To make it look like it does, we use the same background colour for #sidebar and #wrap.

#sidebar {
    background-color:#99c;
    width:247px;
    margin-left:500px;
}

View step 6.

7. Make the navigation bar horizontal

#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.

#nav ul{
    margin:0;
    padding:0;
}
#nav li{
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}

View step 7.

8. Adjust margins

Finally, we adjust the margin and padding of some elements to make the layout a little less cramped.

#header h1 {
    padding:5px;
    margin:0;
}
#nav {
    background-color:#c99;
    padding:5px;
}
#main h2, #main h3, #main p {
    padding:0 10px;
}
#sidebar ul {
	margin-bottom:0;
}
#sidebar h3, #sidebar p {
    padding:0 10px;
}
#footer p {
    padding:5px;
    margin:0;
}

There it is. We have created a simple layout that can be used as a starter for more advanced layouts.

View the final layout.