Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Colored background not extending down

    My website currently isn't up but here is a picture of the problem I'm having
    http://i51.tinypic.com/2lu3sxu.jpg
    Im testing in Firefox 5


    The white background for the content should extend all the way down to the black footer and I'm unsure as to why it isn't. Ideally the area marked as contact us will be a short form in which the background color will be changed and a header added but the main content area will remain white and the entire area should have an overall white background.

    Here is the HTML code, the relevant section starts at
    <div id="Content">

    http://www.text-upload.com/read.php?id=113565&c=2506646

    Here is the css code
    http://www.text-upload.com/read.php?id=113564&c=3359723

    Any help would be appreciated, thanks
    Last edited by Larrikin; 07-31-2011 at 01:28 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you need to clear your floats

    try this:

    Code:
    <div class="container">
     <div style="float: left;">Fighting for your rights...</div>
     <div style="float: right;">Contact us on this form...</div>
     <div style="clear: both;"></div>
    </div>

  • Users who have thanked Sammy12 for this post:

    Larrikin (07-31-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks that works. This is my first time not using tables, so was I just missing an extra div at the bottom to line everything up again and have to clear that every time? Just want to make sure for future reference.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    no you actually should set a height to the container.

    you see, when you float objects, you take them out of the "flow of the page" therefore they really aren't there anymore (they dont take up any space). so by setting a height to the container, you are "clearing" space for the elements

    Code:
    .container { height: 80px; }
    ---

    Code:
    .clear { clear: both; }
    you should use <div class="clear"></div> when there isn't a height (ie: the content is increasing regularly (blogs, comments, any user-input type of stuff)) or when you feel lazy :P
    Last edited by Sammy12; 07-31-2011 at 01:52 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Aw ok thank you again

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    text that is regularly expanding, you would use clear.

    Code:
    clear: left;
    clear: right;
    clear: both;
    clear: all;
    you can also choose what elements you want to clear space for. sometimes you dont want to clear space for one object but you do for another. for instance if you wanted your contact us... part not part of the page, you would use clear:left; to clear just the left float. clearing basically gives an elements its space back on the page. why would you not want something not part of the page? im not really sure
    Last edited by Sammy12; 07-31-2011 at 01:55 AM.


  •  

    Posting Permissions

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