Search code examples
htmlcsspositioncss-floatsticky-footer

css / position main content div to right of login and register div

I am trying to create a page with a header, sticky footer, and three divs in between. Right now it looks like this:

enter image description here

Here is my html and css:

index.php

<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
    <script src="reqscripts/jquery.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/application.css">
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>ONE DAY ONLY</h1>
            <p>THE BIZZ()</p>
        </header>
        <div id="login"></div>
        <div id="register"></div>
        <div id="main"><p>Content</p></div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

css/application.css

* {
    margin: 0;
}

html, body {
    background: rgba(179,180,255,1);
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

.footer {
    background: rgba(22,138,43,1);
}

#loginform {
    width: 240px;
    height: 165px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    font-family: 'Londrina Solid', cursive;
}

#registerform {
    width: 240px;
    height: 200px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Londrina Solid', cursive;
}

#loginuser, #loginpass, #reguser, #regpass, #regemail {
    float: right;
}

#submitbutton, #registerbutton {
    text-align: center;
}

.textaligncenter {
    text-align: center;
}

header {
    font-family: 'Londrina Solid', cursive;
    background: rgba(179,180,255,1);
    height: 90px;
}

#main {
    background: rgba(207,207,255, 1);
}

I have tried adding float: right to the main div, and for some reason it floats it right, but into the footer div. I want the main div (with "Content") to be positioned nicely to the right of the login and register divs.

I used this for my sticky footer:

http://ryanfait.com/sticky-footer/

UPDATE

Per the suggestion below, the page now looks like this:

enter image description here

UPDATE

I got the div to be positioned where I want, but when I add a bunch of line breaks to extend the main div...it extends over the stickyfooter...which shouldnt happen...

Here is what I changed:

#main {
    background: rgba(207,207,255, 1);
    float: left;

}

#loginregcss {
    float: left;
}

#content {
    float: left;
}

Here is my html:

<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
    <script src="reqscripts/jquery.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/application.css">
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>ONE DAY ONLY</h1>
            <p>THE BIZZ()</p>
        </header>
        <div id="loginregcss">
            <div id="login"></div>
            <div id="register"></div>
        </div>
        <div id="content">
            <div id="main"><p>Content</p></div>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

Here is what it looks like:

enter image description here

Solution

  • Thanks for your help guys... I needed clear: both; for .footer and .push - as suggested here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/