SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member flannel jesus's Avatar
    Join Date
    Nov 2012
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Major Problem Understanding Floats/Clears

    so, here's my html (I cut out the header, it was irrelevant, just left the relevant chunks)

    HTML Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
        <meta charset="utf-8"/>
        <title>SecretSite</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    
    <body>
    
    <div id="main">
    
        <div id="left">
        <h1> XXX</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis turpis quis lorem dictum volutpat. Donec elit augue, tempus pretium dapibus ut, feugiat at ipsum. Curabitur erat magna, fermentum tincidunt tempus eu, dictum eget libero. Curabitur tempor interdum mi a lacinia. Morbi aliquam fringilla ornare. Nam lacinia bibendum nunc, nec blandit diam venenatis quis. Pellentesque at ante ac ligula commodo porttitor vehicula non lectus. Mauris eget ante neque. In sodales varius imperdiet.
        </p>
        
        <div class="servers">
        <h2> Dedicated </h2>
            <ul>
            <li>Root access</li>
            <li><strong>Unlimited Bandwidth</strong></li>
            <li>Only User</li>
            <li>Managed/Unmanaged</li>
            <li>Economically priced</li>
            </ul>
        </div>
        
        <div class="servers">
        <h2>Semi-Dedi</h2>
            <ul>
            <li>SSH access</li>
            <li><strong>Unlimited Bandwidth</strong></li>
            <li>Shared by few</li>
            <li>Fully Managed</li>
            <li>Discount Slots</li>
            </ul>
        </div>
        
        <p id="find"><a href="servers.php">CLICK TO FIND OUT MORE</a></p>
            
        </div> <!-- end left div -->
    
    </div> <!-- end main div -->
    
    </body>
    
    </html>
    and here's my CSS
    Code:
    body {
    background-color:white;
    color:black;
    margin:0px;
    padding:0px;
    font-family: Helvetica, Arial, sans-serif;
    }
    
    
    
    #main {
    width:960px;
    margin:auto;
    padding:0px;
    }
    
    div, p {
    margin:0px;
    padding:0px;
    text-align:justify;
    font-size:18px;
    line-height:24px;
    }
    
    #left {
    width:470px;
    float:left;
    margin-right:20px;
    }
    
    h1 { text-align:center; }
    
    .servers {
    float:left;
    width:235px;
    margin-top:10px;
    }
    
    .servers ul {
    padding:15px;
    padding-top:0px;
    margin:auto;
    }
    
    .servers h2 {
    text-align:center;
    }
    
    #find a {
    display:block;
    background-color:#8CC63F;
    width:200px;
    padding:5px 0px;
    margin:auto;
    text-align:center;
    color:white;
    text-decoration:none;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight:bold;
    }
    Now, if you copy-pasta both of those to test out what the page looks like, you'll get something that looks like this:

    Whereas I want that CLICK TO FIND OUT MORE button to be completely under the two divs above it, as you can probably tell from the html.

    Now, admittedly I'm very newbish with html and css and I don't completely understand the mechanics of floats and clears and whatever else -- so someone please give me a hand and tell me what's making this link appear super-sized!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If you add clear both to the #find id it should clear the divs. here are all the ways to clear/contain floats http://www.visibilityinherit.com/cod...ain-floats.php

  3. #3
    SitePoint Member flannel jesus's Avatar
    Join Date
    Nov 2012
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, that did it
    thanks!


Bookmarks

Posting Permissions

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