1

I am new to the world of coding as well as CSS and am attempting to create a page that has 2 columns and multiple rows akin to a table however am unsure if this is the correct way to achieve the result.

NOTES

I am using an internal stylesheet before I copy it across to an external stylesheet.

I have simply named the columns leftnav and leftnav1 and content and content1. I know these names are not ideal however I am trying to ascertain the best way to code the page rather than worry about naming conventions at the moment.

CODE

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />

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

    <title>Sample</title>

    <link rel="icon" type="image/png" href="" />

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

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

    * {

        margin: 0;
        padding: 0;
    }

    body {

        font-family: arial, verdana, sans-serif;
        font-size: 0.8em;

    }

    #backdrop {

        background-color: #000000;
        width: 100%;
        height: 10px;

    }

    #wrapper {

        /* background-color: gray; */
        width: 960px;
        margin: 0px auto;
        margin-top: 100px;

    }

    #logo {

        float: left;
        background-color: #E0EEEE;
        margin-bottom: 10px;

    }

    #topnav {

        float: right;
        margin-right: 180px;
        margin-bottom: 10px;
        /* background-color: #C1CDCD; */

    }

    #topnav ul {

        word-spacing: 5px;

    }

    #topnav ul li {

        list-style-type: none;
        display: inline;

    }

    #innerwrapper {

        clear: both;
        width: 800px;
        margin: 0px auto;

    }

    #header {

        background-color: #000000;
        width: 700px;
        height: 200px;

    }

    #innerhead {

        color: #ffffff;
        padding: 50px;

    }

    #leftnav {

        float: left;
        /* background-color: #838B8B; */
        margin-top: 10px;
        width: 200px;

    }


    #content {

        float: left;
        /* background-color: #CDC9A5; */
        margin-top: 10px;
        width: 500px;

    }

    #leftnav1 {

        float: left;
        /* background-color: #838B8B; */
        margin-top: 10px;
        width: 200px;

    }


    #content1 {

        float: left;
        /* background-color: #CDC9A5; */
        margin-top: 10px;
        width: 500px;

    }

    </style>

</head>

<body>
    <div id="backdrop"></div>
    <div id="wrapper">
        <div id="logo">logo</div>

        <div id="topnav">
            <ul>
                <li>about</li>
                <li>browse</li>
                <li>faq</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="innerwrapper">
            <div id="header">

                <div id="innerhead">
                    Sample text
                </div>

            </div>

            <div id="leftnav">About</div>

            <div id="content">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>

            <div id="leftnav1">About</div>

            <div id="content1">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>
        </div>
    <div>
</body>
</html>
Improve this question

1 Answer 1

Reset to default
2

For dividing your page up into columns, you'd be best to invest some time learning grid CSS frameworks such as 960, Blueprint or OOCSS.

Once you have your page (or parts of your page, if desired) divided up into the required number of columns, you can divide each column up into either fixed-height or variable-height rows.

While it's noble that you want to work this out yourself, I would suggest that as you are "new to the world of coding", you might actually benefit more from looking at existing examples and solutions to this known design problem and adopting a best-practice approach from the outset.

EDIT

Ok, so given we're sticking with what we've got, let's look at a way to clean the styles up.

You're declaring the exact same styles in two places: Leftnav and Leftnav1 would be better changed to:

.leftnav { float: left; margin-top: 10px; width: 200px; }

You can then apply that class to both left nav containers. The same goes for your content and content1 styles.

To answer your original question, "is this the correct way to do it", I would say, "strictly speaking, no it's not. But it is one way to do it.

A better approach might be to use the following:

<body>
    <div id="backdrop"></div>
    <div id="wrapper">
        <div id="logo">logo</div>

        <div id="topnav">
            <ul>
                <li>about</li>
                <li>browse</li>
                <li>faq</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="innerwrapper">
            <div id="header">

                <div id="innerhead">
                    Sample text
                </div>

            </div>

            <div class="leftCol col300">About</div>

            <div class="main">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>

            <div class="leftCol col300">About</div>

            <div class="main">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>
        </div>
    <div>
</body>

Your three required styles then become:

.leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

@Phil.Wheeler - Thanks. It isn't that I don't want to use or look at using grid CSS frameworks however I would like to learn and understand how to achieve a similar result. It may require more coding on my part but at least I am learning what each property means, how best to use it, etc as well as on how best to divide a page into sections. I do appreciate the advise though.
can you please elaborate us what do you want in result.So that we will work on it.
@Phil.Wheeler - Thanks. After posting the question it did occur to me I should be using classes as opposed to ids'. Is the solution you suggested considered best practice?
@user614208 - What I am trying to achieve is a 2 column multiple rows layout. Seeing that I am new to CSS, I put together a page I thought would be appropriate however am unsure if it is the best way to do it or what I should be changing so that it follows best practice.
@PeanutsMonkey - Using reusable classes is definitely considered best practice, so in that regard yes. It is the best approach. However, I wouldn't consider my full answer as the absolute epitome of quality web markup. I was trying to stick to your request of working with what you already have and improve key points.
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.