CODEWITHSUNDEEP
htmlcsslayout
Luke Cycon
Luke Cycon

Reputation: 648

CSS extend div height to page top

I have the code as follows:

<html>
    <head>
        <style type="text/css">
            #container {
            }
            #content {
            }
            a {
                color:#0083cc;
            }
            body {
                margin:0px; padding:0px;
            }
            #header {
                height:20px;
                background-color:#fb0000;
            }
            #section1 {
                margin: 0 auto;
                width: 50%;
                border-style: none none solid solid;
                border-width: 5px;
                border-color: red;
                margin-top: 100px;
            }
        </style>

        <title></title>
    </head>

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

            <div id="content">
                <div style="float: left;">
                    Test
                </div>
                <div id="section1">
                    <div style="text-align:center;">
                        <h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
                    </div>

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

I am wondering if it is possible to have the border that #section1 has continue all the way to the bottom of the #header? As well, would it be possible to have the div containing "test" floated so it appears immediately to the left of #content1's border?

I am fine with completely restructuring the page, so fire away.

Thanks in advance!

Edit: Actually, what I am looking to accomplish is much like facebook's current layout.. Just simpler. So that could be used as a reference to see the end goal

Upvotes: 0

Views: 1375

Answers (1)

Cito
Cito

Reputation: 5613

Why don't you set padding-top: 100px; instead of margin-top: 100px; in your #section1 style? If you want to have the Test content appear lower as well, you can achieve this with another rule like e.g. #content div:first-child { margin-top: 100px; }.

Upvotes: 1

Related Questions