floated left box wont fall below another floated left

Forum Moderators: not2easy

Message Too Old, No Replies

floated left box wont fall below another floated left

olthof

8:04 am on Nov 16, 2008 (gmt 0)

Hi Guys,

Please see below image to understand what I'm referring to.

Image: <snip>
Stripped down Html and CSS: <snip>

So, I'm trying to make a left floated box fall below another floated left box. I've tried various options including using clear:left etc. Basically I want 2 to be below 1 and 3,4,5 to be on the right.

Any help is GREATLY appreciated!

Regards,
Olthof

[edited by: swa66 at 5:40 pm (utc) on Nov. 16, 2008]
[edit reason] Please no personal URLs, see forum charter [/edit]

daveginorge

8:56 am on Nov 16, 2008 (gmt 0)

Hi. Use the clear: left; and all works well.

#sidebar-bottom {
height: 50px;
width: 238px;
background-color: #6C3;
float: left;
clear: left;
}

Hope that helped.
Dave

olthof

9:25 am on Nov 16, 2008 (gmt 0)

Hi dave, thanks for the input. That however doesn't work. It does put the box below the other one although there is a gap now between the two AND it drops down all the boxes on the right hand side. I need them up the top like they were. :(

dompuiu

9:39 am on Nov 16, 2008 (gmt 0)

Hi,

On the #banner, #main and #footer selectors you should replace the "float: right" rule with "margin-left: 238px;"

Hope it solves your problem.

olthof

9:56 am on Nov 16, 2008 (gmt 0)

Hey Dom, i think your on the right track there. I put just those values there and it squashed all the items on the left (#banner, #main, #footer). I will come back to your method and try to get it working BUT I have seemed to find another way to do it. I just put the "sidebar-bottom" item within the "sidebar-left" box and it behaves the way I wish. I can show you the code if anyone would like to see. For the moment I have a deadline however and I'm going to push ahead and get this done :) Still would be interested in working out a way without having to use my way.

Regards, Olthof

alt131

10:30 am on Nov 16, 2008 (gmt 0)

Hi olthof!

I can show you the code if anyone would like to see.

(emph mine)
Make that "everyone" olthof - code provides solutions for future members and discussion opportunities for current ones. Personal url's are strictly not allowed (see the Charter and posts pinned to the top of the forum), because they change and that makes the thread meaningless. Your uri will be snipped by the mods fairly soon, and many regulars will ignore the thread until it's removed and code provided instead.

olthof

11:04 am on Nov 16, 2008 (gmt 0)

Sorry, missed the personal url rule.

Link to image is here:
<snip>

And the solution to the problem which I used, as I stated above was to just put the box I wanted inside the first box. This is done in the .html file. This isn't below the box however, just looks like it is. So it isn't a perfect solution. Any thoughts on how to do this "properly"?

Html code is:

<body><div id="frame">
 <div id="container"> Banner links can go here, float right
 <div id="sidebar-left"> 
 <p>Sidebar goes here (id = sidebar-left)</p>
 <p>Button 1</p>
 <p>Button 2</p>
 <p>Button 3</p>
 <p>Button 4</p>
 <div id="sidebar-bottom">Content for id sidebar-bottom Goes Here</div>
 </div>
 <div id="banner">Banner goes here (id = banner)</div>
 <div id="main"> Main content goes here (id = main)</div>
 <div id="footer"> Footer goes here (id = footer)</div>
</div>
 
</div></body>

CSS code is:


@charset "utf-8";#container {
height: auto;
width: 1008px;
margin-right: auto;
margin-left: auto;
background-color: #F33;
float: right;
}
#frame {
height: 100%;
width: 1008px;
margin-right: auto;
margin-left: auto;
}
#sidebar-left {
height: auto;
width: 238px;
background-color: #FC9;
float: left;
}
#sidebar-bottom {
height: 50px;
width: 238px;
background-color: #6C3;
float: left;
}
#banner {
height: 227px;
width: 770px;
z-index: 5;
background-color: #3CF;
float: right;
}
#main {
height: 400px;
width: 770px;
float: right;
background-color: #FC6;
}
#footer {
height: 75px;
width: 770px;
float: right;
background-color: #F9C;
}

[edited by: swa66 at 5:42 pm (utc) on Nov. 16, 2008]
[edit reason] No personal URLs, please see forum charter [/edit]

dompuiu

11:38 am on Nov 16, 2008 (gmt 0)

Hi olthof,

If you combine what i have said with what Dave said you should obtain the result you want:

#sidebar-bottom {
height: 50px;
width: 238px;
background-color: #6C3;
float: left;
clear: left;
}

#banner {
height: 227px;
width: 770px;
z-index: 5;
background-color: #3CF;
margin-left: 238px;
}

#main {
height: 400px;
width: 770px;
background-color: #FC6;
margin-left: 238px;
}

#footer {
height: 75px;
width: 770px;
background-color: #F9C;
margin-left: 238px;
}

I am sorry i haven't been more explicit.

alt131

10:24 pm on Nov 16, 2008 (gmt 0)

Hi olthof,

Thanks for the simplified code - and the comments - made it really easy to follow ;). My understanding is you want something like:

�� ******banner*********
��sidebar-left �� *********************
�� ******main***********
�sidebar-bottom �� *********************
�� *****footer**********

A common technique is to wrap either the side-bar or the "main content" (banner/main/footer) in a containing div so you can float either of those "groups" as a single "block" - similar to placing #sidebar-bottom inside #sidebar in your mark-up as you have tried.

The layout can be achieved without a containing div but that creates issues because of inconsistent handling of floats and the box model. Hence the "margin" example above is problematic for ie, and floating all elements creates issues in ff, Op9 and winSafari. This layout also triggers the "haslayout" bug that creates the "3px jog" or "gap" you noticed in ie6 between the banner and the side-bar.

In terms of how to do this "properly", IMO there isn't a single "proper" way as there are so many options to work around the rendering inconsistencies. This possibility gives priority to using the least amount of code with minimum disturbance to the existing code. A Conditional comment isn't ideal, but it is the "proper" way to deal with ie, and in this instance directly targets the actual issue. However, per the code comments, hopefully your real-world code will provide ways to avoid using even that.

Move #sidebar-bottom to "outside" #sidebar as you preferred.
Modify your css for:
#banner {
height: 227px; /*this gives the banner haslayout and triggers the ie6 3px jog. This can be avoided by replacing with line-height (if suitable), or not specifying a height and holding the banner open to the required dimension by applying top/bottom margins/padding to the elements inside the header*/
/*width: 770px; remove this to allow banner to appear full width in ff, Op9, winSafari */
/*z-index: 5; not required for provided code sample */
background-color: #3CF;
/*float:right; remove this to allow banner to move up to container top in ff, winSafari Op9*/
}
Add a conditional comment for ie6 in the head:

Have fun ;)

olthof

9:53 am on Nov 17, 2008 (gmt 0)

Thanks for the info dompuiu and especially alt131! I have saved this info for my next project, thank you!

The project that I was working on was due today and because of this I used the quick work around of putting the #sidebar-bottom into the #sidebar-left. I also created a #sidebar-top which was also placed within the #sidebar-left at the top. The use for the top and bottom was to hold an image(as it's background) that rounded/capped off the sidebar which was a repeating background. Is this the way that you would accomplish it? I know there is no correct way as such but I would like to know how the pros do it.
Warm regards, olthof

swa66

1:10 pm on Nov 17, 2008 (gmt 0)

I'd just use "

float:left;

" and "

clear:left;

" on the elements that need to sit on the left side. The clear puts them under the previous float. Widths, margins etc can then be used to shape it into columns as you like.
As with most things floated left, you'll need the 3px jog fix for IE6.

Most examples I see out there use a *lot* of superfluous markup.
E.g. without turning it into colums, you can get away with as little as:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>untitled</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   .idea {
    float: left;
    clear: left;
    background-color: red;
   }
   
  </style>
<!--[if lt IE 7]>
  <style type="text/css">
   .idea {
    margin-right:-3px; /* 3px jog countermeasure */
   }
  </style>
<![endif-->
 </head>
 <body>
  <p class="idea">one</p>
  <p class="idea">two</p>
  <p class="idea">three</p>
  <p class="idea">four</p>
  <p class="idea">five</p>
  <p class="idea">six</p>
  <p>body text goes here make it really long</p>
 </body>
</html>

I personally am rather against adding anything in the html for layout purposes. e.g. the background can easily be placed on a container without chopping it into a repeatign background for the middle and a top and bottom. If you just chop it into two parts for now (CSS3 will come to the rescue eventually and fix this porperly) and us a sliding windows technique. The image if properly compressed doesn't grow larger by size if you repeat the background into it itself up to a side that's far bigger than ever will be needed realistically. E.g. make a background repeating and the bottom in one image and make a background of just the top in another.

Now put the bottom background, including that way too high background for the "middle" part on the parent (bottom aligned) and the top background on the :first-child (top aligned) and it'll just fit itself into a box.
This works well as long as you don't need a box that need both an unknown width and an unknown height, as then you -for now- need to add stuff to the html since you cannot have multiple background images on a single element prior to CSS3.