12 replies [Last post]
inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

Hi forum, I'm new here but been doing CSS and XHTML for a while now, there's just an issue that I'm always coming up against.

I like to use floated boxes side by side for my sites content, these multiple floats need a container to house them all, at the moment I'm using a fixed height container but this has started to get a bit annoying for lots of reasons. Does anybody know how to make a conatiner that 'houses' floats that will expand and obey the floats - without using a fixed height?

Many Thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 45 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Enclose Your Floats

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Do you mean like a standard

Do you mean like a standard 2 column layout? Header, Left Col, Right Col, Footer?

To house floated divs (left and right column I'm assuming?), just use a div and don't set a height to it. Something like this should work unless I'm mis-understanding:

<div id="header" style="width: 1000px; height: 100px;"></div>
 
<div id="container" style="width: 1000px">
   <div id="left" style="float: left; width: 300px;"></div>
   <div id="right" style="float: right; width: 700px;"></div>
</div>
 
<div id="footer" style="clear: both; width: 1000px;"></div>

That container should stretch as short or tall as needed based on the contained div's heights.

There is an issue that might require some extra code however. Here is the issue (copy and pasted from another site):

"The problem happens when a floated element is within a container box, that element does not automatically force the container's height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow."

To fix this, set the container div to class="clearfix":

/* CLEAR FIX*/
.clearfix: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 
.clearfix {
display: inline-block;
}
 
/* Hides from IE-mac \*/
* html .clearfix { 
height: 1%;
}
 
.clearfix {
display: block;
}
/* End hide from IE-mac */

Let me know if this helps and/or even answers your question!

inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

Hi, Thanks, I'm just going

Hi, Thanks, I'm just going to check out your code,

But what I am talking about is regardless of 2 column layout, footer or anything like that....

CONTENT 1
CONTENT 2
CONTENT 3
CONTENT 4
CONTENT 5

- Where

is given a fixed height in relation to the amount of floats whithin it. Which is what I am trying to get away from, I need "container" to expand when I add more floats.

Thanks:)

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 45 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Did you read my link? It

Did you read my link?
It does just what you are asking for.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I guess what I'm saying is

I guess what I'm saying is that I don't understand why you would float the divs at all, unless you want them all next to eachother. If you want them positioned on top of eachother, there is no need to float them at all.

Also, just don't set a height to the container.. it will shrink or stretch to whatever height is needed based on it's contents. To ensure that it does this correctly however, you need to use the "clearfix" code that Deuce linked to, and I posted.

I could see setting a fixed width on a design, but setting a fixed height is un-needed, as a div will, by default, change it's height according to the content placed inside. The "clearfix" ensures that the content doesn't break through the container div due to the floats.

inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

Deuce that link points to

Deuce that link points to nothing I can see related to css in fact it links to a dictionary definition of the word 'all' !?

Titan - Yes they are all next to each other. I update my sites weekly and need to add an extra floated div every week.

If I don’t set a height the 'container' will wrap seemingly randomly to one of the floats or will wrap to something, but it will fall way short of the bottom most float and won’t display correctly in any case.

Basically the container does not obey the floated divs within.

#container {width:600px;}
#the-float {width:100px; height:100px; float:left; margin-right:20px; margin-bottom:20px;}

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Deuce is talking about the

Deuce is talking about the link that he posted several posts up, not the link in his signature.

He linked you to a method (the same method that I actually wrote the code out for) called "clearfix" .. which does what you are talking about.

Quote:

Basically the container does not obey the floated divs within.

That is what the "clearfix" code fixes.. almost word for word. You should have all the information you need in the previous posts to fix this I would think.

Quote:

I update my sites weekly and need to add an extra floated div every week.

As far as this goes.. what are you going to do when it gets too wide? Are you going to allow your page to stretch it's width indefinitely?

inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

okay I see your first

okay I see your first link...thanks looking now Smile

inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

It never gets to wide, the

It never gets to wide, the floats obey the container width no problem at all.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I haven't tested anything,

I haven't tested anything, nor have I ever created a website with more than 3 divs floated next to eachother.. once they hit the container's set width do they just wrap around and position below then? I'm asking just out of my own personal curiosity.

That clearfix code should do what you want though as far as ensuring that the container div stretches vertically as long as needed.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 45 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

So far we are just making

So far we are just making random guesses as to what you are trying to do.
Please just post a link or at minimum please post all your code from doctype to and all your css and we'll go from there

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

inzane09
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2009-03-09
Posts: 6
Points: 0

Yeah they all position

Yeah they all position themselves below, I add a new float to the front - like 'latest update' etc, and all subsequent floats position themselves underneath without stretching the sides, it was just the bottom that misbehaved Wink

I havent had time to test the info you have gave me but it seems you have given me the information I need, so thanks a lot guys Smile