8 replies [Last post]
mbeausoleil
Offline
Regular
Last seen: 12 years 17 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Hey !

I try to understand why in FF PC, FF Mac and Safari, the blue container and the red container doesn't start on the top of the tools container.

The result needed is on IE6 & 7

Thanks !

div.tools {
float: left;
width: 220px;
background-color: yellow;
}
div.tools div {
margin: 5px 0;
width: 100px;
}
div.tools div.col1 {
position: relative;
background-color: blue;
float: left;
clear: left;
}
div.tools div.col2 {
background-color: red;
float: right;
clear: right;
}


1 A

1 B

1 C

2 A

2 B

2 C

2 D

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Get used to going to the CSS

Get used to going to the CSS specification documents for questions like this one or rephrase your question. As it stands, the only proper answer to your question is because that is the way it is supposed to be. Safari, Opera and Firefox implement the spec as close as they can (bugs excepted), whereas IE is much further away (IE6 quite far; IE7 much closer).

The spec on floats is quite clear. Points 5 & 6 are of concern to you.

mbeausoleil
Offline
Regular
Last seen: 12 years 17 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Well, I am just looking for

Well, I am just looking for a solution to get a result... if it's not with float/clear, it can be with other css property.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You're beating your head

You're beating your head against a brick wall. Smile

The only solution is to restructure your html, either before sending it to the browser or with javascript while at the browser. Nothing in CSS is designed to allow you to divide the page up into "buckets" and have CSS drop elements into those buckets from anywhere in the source.

larmib
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-10-14
Posts: 2
Points: 0

as stated in this post:

as stated in this post: http://csscreator.com/node/25894 by Hugo

all you have to do is overflow:hidden to the parent element and it will work.
e.g:

#parente{overflow:hidden; .. other options}
#fleft {float:left; .. other options}
#fright {float:right; .. other options}

left content
right content
mod edit/<code> tags added/tph

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Sorry, larmib, but you're

Sorry, larmib, but you're way off base here. Overflow:hidden is used for containing floats, which is the reason Hugo recommended it in the post you mention. It does not allow a float to float higher than a preceding element. Try the OPs code yourself and you will see what he is trying to achieve.

larmib
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-10-14
Posts: 2
Points: 0

I see what you mean

I was just happy I found the resolution to my problem I was having, and figured it would work for this guy too Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

As Chris has said, you

As Chris has said, you simply restructure the content to alternate red and blue bits, like so:


1 A

2 A

1 B

2 B

1 C

2 C

2 D

Or, you put a wrapper around each column and treat it as a single block, like so:




1 A


1 B


1 C




2 A


2 B


2 C


2 D



.col3 {
  float: left;
  }

.col4 {
  float: right;
  }

.group1 {
  background-color: blue;
  }

.group2 {
  background-color: red;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mbeausoleil
Offline
Regular
Last seen: 12 years 17 weeks ago
Timezone: GMT-5
Joined: 2007-09-27
Posts: 12
Points: 0

Yes it's exactly what I did,

Yes it's exactly what I did, thanks a lot