3 divs floating problem

Gallex · 2008-07-26 11:06:41

my goal is to float them in this order (from left to right):
content, sidebar-1, sidebar-2.

what i’m doing wrong? can anybody tell me?

thebombsite · 2008-07-26 11:57:26

I think you are mixing things up a bit. The simplest way to do this is to give each column a “width”. Don’t use left/right margin unless you want gaps between the columns. No need for “display: inline;” either. Also, as you are using floats I would suggest you wrap the 3 columns in a wrapping div so that you can “clear” before the footer otherwise it might float up the page.

Gallex · 2008-07-26 12:25:19

thebombsite wrote:

I think you are mixing things up a bit. The simplest way to do this is to give each column a “width”.

helpful advice, thank’s

Also, as you are using floats I would suggest you wrap the 3 columns in a wrapping div so that you can “clear” before the footer otherwise it might float up the page.

i’m using clear:both for #foot, this doing the same job

thebombsite · 2008-07-26 14:13:38

Yes that would do it for the footer in this case however sometimes there can be situations where it doesn’t work too well because it is clearing everything. What I use works like this:-

Add the following near the top of your CSS:-

.clearfix:after { content: “.”; display: block; height: 1px; clear: both; visibility: hidden;
}
.clearfix { display: inline-block;
}
/* Hides from IE-mac \*/
.clearfix { display: block;
}
/* End hide from IE-mac */

then just add class=“clearfix” to each block that contains floats, so if you used a wrapper with an id of “wrapper” you could have <div id="wrapper" class="clearfix">. You wouldn’t need to use “clear” for your footer. The advantage of this is that you clear each block as you go so that you start afresh with anything underneath it. Don’t forget you can have 2 or 3 classes for a block like so <div id="wrapper" class="content clearfix"> or <div class="wrapper clearfix">.

Last edited by thebombsite (2008-07-26 14:15:18)

Gocom · 2008-07-26 15:55:29

thebombsite wrote:

No need for “display: inline;” either

Wrong. It is needed cause it removes IE6’s (and below) double margin bug. That’s, if margin is used. Also some unworking old browsers do need inline to inline elements.

thebombsite wrote:

Add the following near the top of your CSS:…

Isn’t that just too much? Just clear:both; is enough if there is seperate element. After-speudo is only used if we don’t want to use other element or if we don’t like overflow. Also overflow:hidden can be used to the container div, and it clears that floating, but same time it prevents pushing elements outside of the container.

maniqui · 2008-07-26 16:03:06

As thebombsite suggest, wrap your floating divs on a wrapper div. Then, your life will be easier.

<div id="content">
    <div id="primary">
    </div>
    <div id="secondary">
    </div>
    <div id="tertiary">
    </div>
</div>

As a clearing method, I prefer this one:

#content {
    overflow: hidden;
    height: 100%; /* fix almost any IE6 problem */
}

I’ve written about this here at forum: overflow: hidden; height: 100%; is the panacea :D

Edit: Gocom was faster.

Last edited by maniqui (2008-07-26 16:04:13)

thebombsite · 2008-07-27 09:51:45

Haven’t seen that method Julián. I’ll check it out.

Jukka – as I said right at the beginning of my post the “clear: both;” would work fine in this case though I still think Gallex would be best adding a “wrapper”, and I also suggested not using margin left/right. The reason I use the above code is because it works in all areas of the page simply by adding class=“clearfix” to the containing block, so for example, if you had left and right floats in your articles for images or whatever, you can clear it very easily so you don’t end up with other floated images or whatever moving up the column or articles dropping below the other columns. I have to say that for a bit of extra CSS it is the simplest method I’ve seen (well apart from Julián’s but even that requires CSS for each block). Having said that I think the code could be reduced a little, it does repeat itself, but I’ve just never bothered to do it.

likhary · 2008-08-05 07:39:07

You no need for “display: inline;” either. Also, as you are using floats I would suggest you wrap the 3 columns in a wrapping div. Style sheet mathod in dreamwaver

Textpattern CMS

Textpattern CMS support forum

#1 2008-07-26 11:06:41

3 divs floating problem

#2 2008-07-26 11:57:26

Re: 3 divs floating problem

#3 2008-07-26 12:25:19

Re: 3 divs floating problem

#4 2008-07-26 14:13:38

Re: 3 divs floating problem

#5 2008-07-26 15:55:29

Re: 3 divs floating problem

#6 2008-07-26 16:03:06

Re: 3 divs floating problem

#7 2008-07-27 09:51:45

Re: 3 divs floating problem

#8 2008-08-05 07:39:07

Re: 3 divs floating problem

Board footer