Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Jan 2009
    Posts
    2
    Member #
    18014
    Hello, I'm a newbie to CSS and web design. I'm working on a Wordpress theme but before I get into PHP tags, I'm only making the simple design. My html code looks like this:
    HTML Code:
    <div id="container">
        <div id="header"></div>
        <div id="customheader">
            <div id="logo"><h1>Title</h1></div>
            <div id="slogan"><p>Slogan</p></div>
        </div>        
        <div id="nav"></div>
        <div id="childcontainer">
            <div id="main">
            <p>Bla bla bla</p>
            </div>
            <div id="sidebar"></div>
        </div>
        <div id="footer"></div>        
        </div>
    But my problem is with CSS. Maybe with HTML and I'm cofused so i'm posting here. I have a main container and a childcontainer. My child container has the "main" part and "sidebar" part for posts and sidebar menu. Here's CSS:
    Code:
    #childcontainer {
        background-image: url(images/childcontainer.png);
        background-repeat: repeat-y;
        width: 760px;
        min-height: 177px;
    }
    #main {
        float: left;
        padding-top: 5px;
        padding-left: 35px;
        width: 515px;
    }
    #sidebar {
        float: right;
        width: 245px;
    }
    The problem is, when the height of text exceeds the background image's height, it runs over the image and image does not repeat until it catches the text height. As you can see in the CSS, I have the bg image in childcontainer. It has the main and sidebar images not sliced, its merged. Do I need to slice the image into two parts and give them to main and sidebar or what? I was thinking if child's height increase, the container's height will increase. Is that a wrong logic for CSS coding?
    Last edited by PipBoy; Oct 17th, 2013 at 02:56 PM.

  2.  

  3. #2
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    Whenever you have two floated items side by side you need to "clear the float". Add a class to your css:

    Code:
    .clear: {clear:both;}
    Then after the

    HTML Code:
    <div id="sidebar"></div>
    add

    HTML Code:
    <div class="clear"></div>

  4. #3
    Junior Member
    Join Date
    Jan 2009
    Posts
    2
    Member #
    18014
    Thanks very much! That worked.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Actually, the preferred way of doing this is not using the clear class, since it is completely non-semantic, but rather using a trick with the overflow property. Instead of adding the extra div, give childcontainer the following additional CSS property:

    Code:
    overflow: hidden;
    This will ensure that it `clears the float' without having to add an element that has no meaning. See Clearing floats on the quirksmode blog for more details.

  6. #5
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    That's a good call.

    That said, if you do use the overflow:auto method, you still have to clear the floats for your footer but you can place the clear:both in the footer styles rather than having to add a div.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That shouldn't be the case. The overflow method extends the container to encompass all of its internal floats, thus pushing the footer down by consequence of the way elements are flowed by the browser.

  8. #7
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    Not if the footer is in the same container. The footer does get pushed down in IE but not in Safari or Firefox. You have to add clear:both to the footer style or else it will not be pushed down in the latter two browsers (who are probably interpreting it correctly).

    Try it for yourself and see:

    HTML Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    <!--
    div.container {
        border: 1px solid #000000;
        overflow: hidden;
        width: 100%;
        background-color:#FF0000;
    }
    
    div#header {
        width:100%;
        height:200px;
        background-color:#333300;
    }
    
    div.left {
        width: 45%;
        float: left;
        background-color:#FFFF00;
    }
    
    div.right {
        width: 45%;
        float: left;
        background-color:#000066;
    }
    
    div#footer{
        width:100%;
        height:200px;
        background-color:#FF00FF;
    }
    
    -->
    </style>
    </head>
    
    
    <body>
    
    <div class="container">
        <div id="header"></div>
        <div class="left">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="right">
            <p>test</p>
        </div>
        <div id="footer"></div>
    </div>
    
    </body>
    </html>

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Ah yes, fair point. That doesn't seem to be the case on his page, however -- the footer is outside of the childcontainer div.

    Regardless, if there is a way without a div dedicated to clearing (as would be the case for a footer in the situation you described), then using clear is not only possible, it's better, since it's more obvious in the CSS what is happening. If there is no way without dropping a div solely for clearing in there, however, the overflow way is better, because it avoids pointless, non-semantic markup.

  10. #9
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    Agreed.

    For some reason, I was thinking his footer was inside the container...but I was looking at the container div mistakenly and not the childcontainer div.

    As you say though, best to not have an unnecessary div which seems avoidable in both cases.

    A good discussion all the way around...got me thinking about the way I do it. What can I say, old habits die hard.

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I figured. At my own first glance, I had thought the footer was inside the container, so I was about to leave the thread alone

    In this case, however, the overflow solution is the only one that works, since clearing the footer actually only makes it clear the two floats, and their containing element doesn't expand to contain them in this case. Bit of an interesting quirk, really, but there you have it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com