XHTML/CSS 3 Column Quandry_问答_开发者_运维开发者技术经验分享

I am new to the world of coding, XHTML, CSS and PHP. This is my first attempt to conjure a what I understand to be a 3 column layout based on my minimal knowledge of CSS.

What I am confused about is using overflow: auto as well as structuring the document.

For example, I was reading the tutorial at http://www.icms.info/website-howto/css-tutorial which I believe to be convoluted. I hence created a 3 column layout based on what I knew. I changed the position of the content div tag just above the footer div tag as opposed to it appearing above navigation. My confusion hence is

Question 1

Why did I have to change the position of my content div tag from (as the article suggests that the content div tag be above the navigation div tag)?

   <div id="container">
        <div id="header">
            header
        </div>

        <div id="content">
            content
        </div>

        <div id="navigation">
            navigation
        </div>

        <div id="news">
            news
        </div>

        <div id="footer">
            footer
        </div>
    </div>

 <div id="container">
    <div id="header">
        header
    </div>

    <div id="navigation">
        navigation
    </div>

    <div id="news">
        news
    </div>

    <div id="content">
        content
    </div>

    <div id="footer">
        footer
    </div>
</div>

Question 2

Why wasn't I able to use the declaration overflow: auto in the container id selector i.e

#container {

            width: 750px;
            margin: 0px auto;
            border: 1px dashed #000000;
            overflow: auto;

        }

and had to resort to clear: both in the footer selector?

Entire Code

<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />

<title>Sample</title>

<link rel="stylesheet" type="text/css" href="web.css" />

<style type="text/css" media="all">

    * {
        margin: 0;
        padding: 0;
    }

    body {

        background-color: #eeeeee;
        font-family: arial, sans-serif;
        font-size: medium;

    }

    #container {

        width: 750px;
        margin: 0px auto;
        border: 1px dashed #000000;

    }

    #header {

        height: 120px;
        background-color: gray;

    }

    #content {

    开发者_StackOverflow中文版    background-color: red;
        width: 715px;
        text-align: center;

    }


    #navigation {

        background-color: orange;
        float: left;

    }

    #news {

        background-color: blue;
        float: right;

    }

    #footer {

        background-color: green;
        clear: both;
    }

</style>

<div id="container">
    <div id="header">
        header
    </div>

    <div id="navigation">
        navigation
    </div>

    <div id="news">
        news
    </div>

    <div id="content">
        content
    </div>

    <div id="footer">
        footer
    </div>
</div>

EDIT

@Phil.Wheeler This is what I started with;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Sample</title>

    <link rel="stylesheet" type="text/css" href="web.css" />

    <style type="text/css" media="all">

        * {
            margin: 0;
            padding: 0;
        }

        body {

            background-color: #eeeeee;
            font-family: arial, sans-serif;
            font-size: medium;

        }

        #container {

            width: 750px;
            margin: 0px auto;
            border: 1px dashed #000000;
            overflow: auto;

        }

        #header {

            height: 120px;
            background-color: gray;

        }

        #content {

            background-color: red;
            width: 715px;
            text-align: center;

        }


        #navigation {

            background-color: orange;
            float: left;

        }

        #news {

            background-color: blue;
            float: right;

        }

        #footer {

            background-color: green;
        }

    </style>

</head>

<body>

    <div id="container">
        <div id="header">
            header
        </div>

        <div id="content">
            content
        </div>

        <div id="navigation">
            navigation
        </div>

        <div id="news">
            news
        </div>


        <div id="footer">
            footer
        </div>
    </div>

</body>

As you point out in your opening sentence, you are new to coding so some of the HTML / CSS structure rules may seem a little counter-intuitive to start with.

I'll answer your second question first as it's the most direct. The use of the "overflow" property dictates to your browser how it should present any content that goes past the boundaries of the element it's contained in. For example, if you have a <div> element that is 100 pixels high, but your content is a full paragraph that goes well past 100 pixels:

overflow: visible will show all the content as spilling out over the border of your div.
overflow: hidden will expand the size of your div to contain all your content (as long as no other parent rules prevent or override this behaviour).
overflow: scroll will display scroll bars so the user can scroll up and down (or left and right) within the div.
overflow: auto will add scroll bars to the div only if its content exceeds its fixed size.

Read more about the overflow property here.

Regarding your three column layout, you'll find that changing your CSS rules a little and slightly modifying your HTML structure will make life much easier without necessarily needing to rely on overflow or clear properties in your styles. I'm assuming your columns are Content, Navigation and News.

Have a look at this example:

    <div class="leftCol">
        <h2>Left Column</h2>
        <p>Left column is 250px by default. It can be extended by applying other classes.</p>
        <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </div>
    <div class="rightCol">
        <h2>Right Column</h2>
        <p>The right column is by default 300px wide. It can be extended by applying other classes.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
        </ul>
    </div>
    <div class="main">
        <h2>Main Content</h2>
        <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
    </div>

Notice I position my floated columns in the order: left, right, main. My main column simply takes up whatever space is left between the two side columns. Here is the CSS to do it:

.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
.main{display:table-cell;*display:block;width:auto;}

I haven't needed to use overflow or clear to achieve this and everything lays out nicely within whatever container I place these three elements in.

Hope this helps.

Question 1

having the navigation as high as possible is better for SEO.

Question 2

use the overflow: auto only on elements, which you actually WANT to have overflow auto. It may be anyway a bad idea to have an overflow: auto, because, websites with a scrollbar within a content section is e.g. bad for mobile devices. You may want to avoid this (or at least make different layouts, when a mobile device accesses your site)

you may want to work with this approach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Sample</title>

    <link rel="stylesheet" type="text/css" href="web.css" />

    <style type="text/css" media="all">

        * {
            margin: 0;
            padding: 0;
        }

        body {

            background-color: #eeeeee;
            font-family: arial, sans-serif;
            font-size: medium;

        }

        #container {

            width: 750px;
            margin: 0px auto;
            border: 1px dashed #000000;
            overflow: auto;

        }

        #header {

            height: 120px;
            background-color: gray;

        }

        #content {
            width: 390px;
            background-color: red;
            float: left;
            display: block;

        }


        #navigation {
            width: 180px;
            background-color: orange;
            float: left;
            display: block;

        }

        #news {
            width: 180px;
            background-color: blue;
            float: left;
            display: block;

        }

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

    </style>

</head>

<body>

    <div id="container">
        <div id="header">
            header
        </div>

        <div id="navigation">
            navigation
        </div>

        <div id="content">
            content
        </div>

        <div id="news">
            news
        </div>


        <div id="footer">
            footer
        </div>
    </div>

</body>