www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS spacing help

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    CSS spacing help

    Hey, ive been having troubles finding a way to space the "content" away from the "recents" a margin-top: 25px, doesnt seem to do anything unless i bump it up to 300+ etc and then if the "recents" gets more text added it wont stick to that gap, the class=recent doesnt seem to cover the background of the left;middle;right divs and i suspect that has something to do with it, but how do i make it clear those? i have clear: both; in the recents yet it wont clear them?
    also having trouble getting my footer to slide to the bottom instead of in the middle of the bottom

    *note that the weird background colors for everything is so i can see whats where and size and so on,

    *screenshot of it
    http://i.imgur.com/qvnriwi.jpg


    index.html
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>titlez</title>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css" type="text/css"/>
        </head>
        <body>
            <div class="frame">
                <header><h1>header whatever here</h1></header>
                <div class="recents">
                    <div class="left">
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recentwordwrapwordwrapwordwrapwor*word_wrap_test</p>
                        <p>10 recent</p>
                    </div>
                    <div class="middle">
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>  
                    </div>
                    <div class="right">
                        <p>10 recent</p>
                        <p>10 recent</p>
                        <p>10 recent</p>
                    </div>
                </div>
                <div class="content">
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                    <p>*needs to be spaced from recents</p>
                </div>
                <footer>
                    <p>small footer her *needs to be pushed bottom</p>
                    
                </footer>
            </div>
        </body>
    </html>
    style.css
    Code:
    body {
        background-color: gainsboro;
        font-family: sans-serif;
        word-wrap: break-word;
    }
    .left {
        margin-left: 0px;
        margin-top: 10px;
        float: left;
        background: green;
        width: 150px;  
    }
    .middle {
        margin-left: 5px;
        margin-top: 10px;
        float: left;
        width: 440px;
        background: lightseagreen;
         
    }
    .right {
        margin-left: 5px;
        margin-top: 10px;
        float: left;
        background: lightpink;
        width: 200px;
    }
    
    .recents {
        margin: auto;
        width: 800px;
        background: magenta;
        height: 100%;
        clear: both;
        position: relative;
    }
    header {
        margin: auto;
        width: 800px;
        background: darkslategray;
        height: 150px;
        color: antiquewhite;
        text-indent: 10px;
        margin-bottom: -5px;
    }
    .frame {
        margin: auto;
        width: 800px;
        background: mediumpurple;
        height: 100%;
        clear: both;
    }
    .content {
        margin: auto;
        margin-top: 25px;
        width: 800px;
        background: olive;
        clear: left;
        position: relative;
    }
    footer {
        background: plum;
        padding-bottom: 0px;
        position: relative;
        bottom: 0;
    }

  2. #2
    Join Date
    Oct 2013
    Posts
    2
    Fixed it with overflow: auto; no need for any help (also fixed a lot of other "mistakes")

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles