I am working hard at learning CSS and find the behaviour of floats a little maddening. When they don't do what I expect I find troubleshooting very hard. Here is an example. I worked through Ryan Brill's Creating Liquid Layouts with Negative Margins (from A List Apart) and found it very helpful. I decided to modify the three column liquid format into a static size of 800px across, centered in the browser viewport, as a learning exercise.
I ran into three problems, all related, that I cannot figure out. I had to put a space in the header - if I take it out, the sidebar goes up into the banner. I had to move the sidebar before the content, which is a no-no for text readers. And third, the column headers for the three columns don't line up. So, I've mucked it up pretty bad. If anyone wants to take a look, there really isn't that much code. Go HERE (<!-- m --><a class="postlink" href="http://www.glenngilchrist.com">http://www.glenngilchrist.com</a><!-- m -->) if you dare. The stylesheet is spfeed.css at the same location. Any help would be greatly appreciated.
No the same method, but the layout is the same.Thanks for looking at this. It certainly works - now I'll try to figure out why mine didn't.Here's a start:
h1 {margin: 0;} /* level the headers */
#wrapper {
margin:auto; /* center document in FF */
background: url(images/background_2.gif) repeat-y right;
width: 800px;
}What I find interesting is that while there are three columns (left sidebar, main content and right sidebar) you never use a float:right - everything is floated left. That's why I find that the way things float is not always intuitive.It depends on the situation:
with columns I usually float:left, but the right column could be float:right.
with images and short chunks of text that need to be on the right, float:right.
MaxDesign (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/">http://css.maxdesign.com.au/floatutorial/</a><!-- m -->) and BigBaer (<!-- m --><a class="postlink" href="http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm">http://www.bigbaer.com/css_tutorials/cs ... torial.htm</a><!-- m -->) show some of the possibilities.Great references - thanks again.
I ran into three problems, all related, that I cannot figure out. I had to put a space in the header - if I take it out, the sidebar goes up into the banner. I had to move the sidebar before the content, which is a no-no for text readers. And third, the column headers for the three columns don't line up. So, I've mucked it up pretty bad. If anyone wants to take a look, there really isn't that much code. Go HERE (<!-- m --><a class="postlink" href="http://www.glenngilchrist.com">http://www.glenngilchrist.com</a><!-- m -->) if you dare. The stylesheet is spfeed.css at the same location. Any help would be greatly appreciated.
No the same method, but the layout is the same.Thanks for looking at this. It certainly works - now I'll try to figure out why mine didn't.Here's a start:h1 {margin: 0;} /* level the headers */
#wrapper {
margin:auto; /* center document in FF */
background: url(images/background_2.gif) repeat-y right;
width: 800px;
}What I find interesting is that while there are three columns (left sidebar, main content and right sidebar) you never use a float:right - everything is floated left. That's why I find that the way things float is not always intuitive.It depends on the situation:
with columns I usually float:left, but the right column could be float:right.
with images and short chunks of text that need to be on the right, float:right.
MaxDesign (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/">http://css.maxdesign.com.au/floatutorial/</a><!-- m -->) and BigBaer (<!-- m --><a class="postlink" href="http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm">http://www.bigbaer.com/css_tutorials/cs ... torial.htm</a><!-- m -->) show some of the possibilities.Great references - thanks again.