15 replies [Last post]
slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hello,

I'm having problems with the horizontal alignment of nested floats.

I basically have one outer float which contains 3 inner floats to be aligned horizonatally inside.

I am using the a clearfix to clear the above float but this doesn't seem to make a difference.

I've stripped the page down to a sample replicating the problem and it can be seen here with CSS embedded:

http://tinyurl.com/2zmf8w

Can anyone suggest why they wont align side-by-side?

I'm using the latest version of Firefox on the Mac OS X to develop on.

Many thanks

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

add float: left to #block-1

add float: left to #block-1 and #block-2 ?

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

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

float:left is applied to

float:left is applied to #block-1. I just list my properties alphabetically so it was on the second line after background:green instead of the first. I've removed the background colour now so it is first in line. I was only using that to help visualise the blocks.

I currently have all inside blocks set to float:left. I have also tried floating them right and a combo of the both but no difference at all.

Slip

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Validate!

Verschwindende wrote:
  • CSS doesn't make pies

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Mr Pineapple head, You're

Mr Pineapple head,

You're absolutely right. Sincere apologies, I deserve ten lashes of the whip for such a hideous crime to design. That closing html tag is now in and I'll make sure I say a dozen hail mary's before even contemplating another unforgiveable human error in my desire not to spend a whole day replicating the problem on the forum.

With that woeful mistake now corrected (view the same URL above) and the html police now able to sleep soundly again I have discovered to my utter surprise that it has made absolutely no difference to the problem at hand.

My original problem of nested floats not aligning vertically still remains.

Slip

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

My apologies if the above

My apologies if the above post sounded a tad harsh. It's just I've got a stack load to work on this weekend and this float problem is adding a problem I didn't anticipate. I just threw the relevant bits into a separate page to see if I'd still get the problem with all other styling and markup removed and to post to the forum. In my haste I didn't check the semantics of the formatting which I probably should have.

At the moment I just can't see any reason why the floats which are set to float next to each other won't align horizontally. The only difference from the other floats in my page is that they are nested inside another float.

Just hoping someone has seen a similar problem and knows a way around it.

All suggestions welcome.

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Is it possible to have

Is it possible to have nested floats? Can anyone provide any examples?

slip

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

Deuce wrote:add float: left

Deuce wrote:
add float: left to #block-1 and #block-2 ?

I don't see any effort to having applied this code to your document?
When I add the float:left to both of these divs all three blocks sit gracefully next to each other.

Is this NOT what you are looking 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

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hi Deuce, Thanks for the

Hi Deuce,

Thanks for the feedback. I'm a little confused though because my markup DOES have float: left applied to #block-1 and #block-2 as follows:

#col-2 #block-1 {
float: left:
padding-right: 20px;
width: 220px;
}
#col-2 #block-2 {
float: left:
padding-right: 20px;
width: 220px;
}
#col-2 #block-3 {
width: 220px;
}

This is embedded in my demo page:

http://tinyurl.com/2zmf8w

However, I am seeing them stacked up on top of each other (vertically) rather than next to each other (horizontally).

Is this what you are seeing too? I'm using the latest version of firefox on the Mac.

Cheers

slip

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

float: left:

:ohdear:


float: left:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

ah.. I see the error of my

ah.. I see the error of my ways. It really was a long night Smile

Now that I've changed the colons to correctly be semi-colons. It behaves exactly as I expected them to behave in the first place Smile

Many thanks for pointing that out. I need some more coffee! Tongue

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 9 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9773
Points: 3855

It is errors due to long

It is errors due to long sessions that make validation so helpful. If you will use the W3 validators like Chicago citizens vote, i.e. early and often, you'll save yourself a lot of grief.

Catching syntax errors by eye is not nearly as accurate as by machine. That is why we do insist on validation—our eyes aren't any better than yours.

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

thepineapplehead wrote:Can

thepineapplehead wrote:
Can we start by validating the HTML and CSS, please?

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fprobe8.com%2Fsandbox%2Fnested_floats.html

perhaps I should have made that bit a bit more obvious Wink

Verschwindende wrote:
  • CSS doesn't make pies

slippy
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-01-24
Posts: 155
Points: 4

Hi Guys, Yeah point taken.

Hi Guys,

Yeah point taken. Although even the validator didn't spot that one. It said I was missed a closing html and charset so I fixed those and revalidated and it came up with a pass.

You just can't escape those tired eyes errors Wink

Cheers for the help.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

There's a separate CSS

There's a separate CSS validator Wink

Verschwindende wrote:
  • CSS doesn't make pies

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 11 years 35 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Hahaha - I Looove the quote

Hahaha - I Looove the quote pineapplehead. I wonder where you got that one from Tongue

I guess you're just learnin' from the master. Hehe!