How to float a sidebar without loosing background colour?

Discussion in 'Web Design and Development' started by Dal123, Aug 20, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    Thanks to everyone on this brillian forum I've got my logo centre'd as the "masterhead".
    I've just constructed my "sidebar" and looks pretty sexy, only when I go to float it to the right I loose my light blue background :confused:. How can I keep my background, I've tried clear:both.

    Also my navbar at the top; It is constructed by an <ul> and I want it to align it by justify text so it fits perfectly spaced out to the size of the ruler (and container 900px I think).
    Any help well appreciated.:D
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Is there a reason you cannot apply the light blue to your ul/li items? Oh, and did you mean float it left, rather than right?

    An idea for your nav; 900 / 6 nav items = 150px. Make your li items in the nav 150px wide each. That's one approach. Using text-align: justify wouldn't work as there's only one line. Think about when justify is applied to a single line of text, it doesn't stretch the text all the way across.
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    Thanks again for your advice angelwatt, I owe you a beer.
    This is what happens when I float my sidebar right. I quite like the grey side bar and was hoping to keep it.
    I'm trying to learn how things are laid out with coding, as you can see I'm struggling :p.
    So rewarding when it goes good though.:D My book did tell me to beware of floats and they really do go weird; don't understand them yet.
     

    Attached Files:

  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I don't drink alcohol so I'll pass on the beer. Your problem description and the attached image were showing different things, which led me down the wrong path. A common technique to handle this situation is to add an empty div after the navigation and give it a class of clear and then in the CSS have it clear:both. It's not wonderful in terms of semantic HTML, but is an easy route. Often you'll have other content that you can apply the clear to (if need be) so the background fills naturally, such as the footer section. It'll partly depend on how you layout the entire page content and all.
     
  5. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #5
    Another time perhaps. Sorry about the misleading post; once again I've not explained myself properly.
    So would that be in the html?
    I'm guessing sidebar as clear. Sorry for the stupid questions :eek:.
    Thanks again angelwatt.:)
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    This should clarify.
    HTML:
    <ul id="nav">
      ...
    </ul>
    <div class="clear"></div>
    CSS:
    Code:
    .clear {
     clear: both;
    }
     
  7. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #7
    You're very generous buddy, thank-you very much. Much appreciated :D:D:):):).
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Back to your top navigation. The method I gave earlier has the consequence that you'll find the spacing between items is inconsistent looking. An alternative technique, which I use on my web site, is to adjust padding on the li tags inside the ul. So you have your navigation HTML,

    HTML:
    <ul id="nav">
      <li><a href="">One</a></li>
      ...
      <li><a href="">Last</a></li>
    </ul>
    Your CSS would be,
    Code:
    #nav li a {
     padding: .4em 1em;
     ... /* Whatever other CSS you have */
    }
    You'll need to adjust the padding in order to properly fit everything to the full width, but still reasonably simply and gives a better look.
     
  9. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #9
    Surely I should get it by now.

    Don't know what I'm doing wrong, I know you're right, I've read this in my book too about clearing it. I've read the chapter about 6 times :eek:. Just don't understand it.
    This is my html:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout2.css'>
    </head>
    
    <body>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    <li>home</li>
    <li>services</li>
    <li>previous jobs</li>
    <li>guarantee</li>
    <li>contact us</li>
    </ul>
    <div class="clear"></div>
    </div>
    <div id="sidebar">
    <ul>
    <li>RC Staircases
    <li>3 Flight Mirrored Concrete Staircase</li>
    <li>Cast-in-situ Concrete Staircase</li>
    <li>Concrete Staircase</li>
    <li>2 Flight Staircase</li>
    <li>Waterproof Concrete Basements
    <li>Waterproof Concrete Basement</li>
    <li>Caltite Basement</li>
    <li>Concrete Structures
    <li>Angle Formwork</li>
    <li>Heat-Efficient Roof</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    This is my CSS:
    HTML:
    body {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    }
    
    #container {
    position:relative;
    width:900px;
    height:100%;
    margin:0px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    border:0px;
    background-color:#CCCCFF;
    }
    
    #masterhead {
    background-image:url(Images/Graphics/logo_web.gif);
    width:900px;
    height:118px;
    padding:0px 0px 0px 0px;
    margin:0px;
    }
    #masterhead {
    margin-left:auto;
    margin-right:auto;
    }
    #navbar ul{
    text-align:center;
    list-style:none;
    font:1.5em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    }
    #navbar li {
    display:inline;
    }
    .clear {
    clear:both;
    }
    #sidebar ul {
    list-style-type:none;
    font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:15px 0px 0px 0px;
    padding:0px;
    float:right;
    }
    
    #sidebar li {
    background: #CCC;
    width:200px;
    padding-top:0.5em;
    padding-bottom:0.5em;
    padding-right:0.3em;
    border-bottom:0.1em solid#666;
    text-align:right;
    }
    
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    That looks like a slight error on my part. The cleared div goes after the nav and also after the sidebar. I only wrote in the nav part earlier as I forgot about the sidebar temporarily. Essentially the clear will go after the floated item. Anywhere after.
     
  11. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #11
    Cheers buddy, that's got it, looking nice. I need to spend even more time trying to learn the layout of css, still not understanding how it works, seems illogical at the moment :confused:. Very disappointed with my book, doesn't explain it clearly for me, I think it could do with some basic illustrations and arrows to show how the css formats it.:(
    Thanks again angelwatt, much appreciated :D.
     

Share This Page