Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How to float a sidebar without loosing background colour?

Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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
 

Attachments

  • Picture 2.png
    Picture 2.png
    186.6 KB · Views: 117
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.
 
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.
 

Attachments

  • Picture 3.png
    Picture 3.png
    185.3 KB · Views: 87
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.
 
Another time perhaps. Sorry about the misleading post; once again I've not explained myself properly.
add an empty div after the navigation and give it a class of clear
Click to expand...
So would that be in the html?
CSS have it clear:both.
Click to expand...
I'm guessing sidebar as clear. Sorry for the stupid questions :eek:.
Thanks again angelwatt.:)
 
This should clarify.
HTML: 
<ul id="nav">
  ...
</ul>
<div class="clear"></div>
CSS:
Code: 
.clear {
 clear: both;
}
 
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.
 
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;
}
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back