19 replies [Last post]
mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

ok you can view my code at www.friendsoffloyd.com ...The problem I am having is the #contentwin is not aligning itself against the navigation area. I am pretty sure it is a float issue, however, no matter what I try, it doesn't seem to work. Any ideas?

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

Problem with alignment

The floated content must come before the unfloated content.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 5 years 40 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Problem with alignment

WOW Chris..S !!!
That one sentence was like a flash bulb going off in my brain. That solved a problem I've had with positioning since I started with CSS.

Thanks!

Anonymous
Anonymous's picture
Guru

Problem with alignment

Chris..S wrote:
The floated content must come before the unfloated content.
Only if you want it aligned at the top. You can put floated content inside of unfloated content if you want the floated content to be surrounded by the unfloated top, bottom and float-side.

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

So are you saying my divs are not in the right order? I am sort of new at all of this so can you please explain in an easier manner Laughing out loud

Anonymous
Anonymous's picture
Guru

Problem with alignment

mrwicked wrote:
So are you saying my divs are not in the right order? I am sort of new at all of this so can you please explain in an easier manner Laughing out loud
Sure.

Your divs are not in the right order.

How's that? Tongue

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

Problem with alignment

In current browsers (IE and FF at least)* the top of the floated content will be immediately below the unfloated content that immediately preceeds it. If there is other floated content about, its top can not be higher than the top of the preceeding floated content. This only applies to other content/elements that are siblings of the floated element. Elements in other containment blocks will (generally**) have no effect

So if it follows a block element, it will be below that block element. If it is in the middle of some inline content, its top will be on the line below.

*This isn't quite what the spec says. It say the browser can start the floated content on the same line if there is space remaining on that line. But since only Opera implements that in practise (does FF1.5?) it makes more sense to assume it doesn't happen.

**There are some rare exceptions, notably "clear", the effects of which under some circumstances will apply outside its containment block.

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

Triumph wrote:
mrwicked wrote:
So are you saying my divs are not in the right order? I am sort of new at all of this so can you please explain in an easier manner Laughing out loud
Sure.

Your divs are not in the right order.

How's that? Tongue

Ok, I've tried everything. What order do they go in then if its that easy. Ugghh so frustrating.

Anonymous
Anonymous's picture
Guru

Problem with alignment

mrwicked wrote:
Ok, I've tried everything. What order do they go in then if its that easy. Ugghh so frustrating.
I guess you didn't try moving the floated div (as mentioned by Chris) or else you would have had your answer.
Chris..S wrote:
The floated content must come before the unfloated content.

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

actually I did. I didn'r re-upload it, so if you were looking there, you wouldnt see any changes.

Anonymous
Anonymous's picture
Guru

Problem with alignment

mrwicked wrote:
actually I did. I didn'r re-upload it, so if you were looking there, you wouldnt see any changes.
Well, I took the page and reordered one div and it worked for me. Smile

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

Well, do you want to tell me so I can do it?

Anonymous
Anonymous's picture
Guru

Problem with alignment

mrwicked wrote:
Well, do you want to tell me so I can do it?
*sigh*

http://www.csscreator.com/css-forum/ftopic9114.html

I'm not much of a spoon feeder. If you are not going to try yourself to move one single line of code then I feel very sorry.

<div id="rubberband">
<div id="banner1"></div>
<div id="banner2"></div>
<div id="contentwin"></div>
<div id="nav1"></div>
<div id="home"></div>
<div id="about"></div>
<div id="join"></div>
<div id="whatyouget"></div>
<div id="frut"></div>
<div id="nav2"></div>
<div id="footer"></div>

:roll: How about giving it a bit of a try next time?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Problem with alignment

They did tell you...

the floated content (which is the #contentwin div) must come before the non-floated conent (which is the #nav2 div). So just move that one div (#contentwin) above the other (#nav2).

Anonymous
Anonymous's picture
Guru

Problem with alignment

wolfcry911 wrote:
They did tell you...

the floated content (which is the #contentwin div) must come before the non-floated conent (which is the #nav2 div). So just move that one div (#contentwin) above the other (#nav2).Actually, #nav1. Smile

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

I did do that...and it still doesnt work! I'm using internet explorer and you guys may be using firefox and its working in there..I swear it isnt working for me and I have exactly what you do.

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

Here's a ss of what I see and the source..see it doesnt work.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Problem with alignment

You're making the mistake of using IE, which is notorious for it's float problems. It adds 3px to floats to 'protect' the designer - never works. Reduce the #contentwin width by 3px to see it work. If it does, then feed IE only a -3px margin (right side?) to correct the problem.

Anonymous
Anonymous's picture
Guru

Problem with alignment

mrwicked wrote:
I did do that...and it still doesnt work! I'm using internet explorer and you guys may be using firefox and its working in there..I swear it isnt working for me and I have exactly what you do.
Wow, it even worked in IE/Mac. Laughing out loud

Alright, sorry for saying you didn't try.

Now I get to poke at you with the "Ha ha, you're building for IE" stick. Laughing out loud

Read number 6 here. Smile

mrwicked
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-8
Joined: 2005-12-23
Posts: 49
Points: 4

Problem with alignment

wolfcry911 wrote:
You're making the mistake of using IE, which is notorious for it's float problems. It adds 3px to floats to 'protect' the designer - never works. Reduce the #contentwin width by 3px to see it work. If it does, then feed IE only a -3px margin (right side?) to correct the problem.

Alright were making progress now Laughing out loud...I reduced the width by 3px and it seemed to work. Now if you go back to www.friendsoffloyd.com and look at it, you see there is that black line separating the nav from the content window. I tried that -3px margin to fix it, but it doesnt seem to be working (that code isnt in the uploaded source so you wont see it). Any other suggestions?