CSS Float

[dudeking]

http://beta.dudeking.co.uk/comp/
I am using float, it works in IE but jumps out of it's wrapper in FF.
I have played around with widths and z-index's but now I'm out of ideas.

Any help would be great :)

[Buzz]

You really should not need to assign a z-index to everything. And you shouldn't need to add the position property to everything either.

What's it supposed to look at (I'm too lazy to launch a PC then IE right now).

[dudeking]

http://beta.dudeking.co.uk/comp.jpg

Should look like that, but in FF it won't stay in the green wrapper. I can see where I could remove z-index but not sure about positioning. Sorry to keep bombarding you with questions, I just seem to learn quicker this way, googleing gets really tedious. :)

[Buzz]

Ahh, Floats have no height. Therefore they will not extend a container (div) to it's bottom. If you have a float inside a div you need to either set a height for the containing div, or add a clear: both; to some other div.

If you intend to put more content under the "Welcome" header, then you don't need to worry about it, The additional content will force the container div to expand vertically and encompass the news float. If you want to just set it to always contain the news float try setting the footer style to have a clear: both; property. You can also add <div style="clear: both;"></div> right below the news div.

It's not really a problem, it's just how floats work.

[dudeking]

Okay, thanks scott :)
I'll try it now

[dudeking]

clear:both; brought the footer down but the wrapper with the background in didn't move. I tried adding it to the wrapper as well but no luck.
Never mind it's for my IT course work so all I have to hand in are screen prints of me making it and a final screen print of the site. Only problem is layout works in IE menu's work in FF. So I just edited the working menus onto the working layout in PSP lol

It's okay I am allowed help with my code the rest of the class are just making something on front-page and none of the staff know about css etc. so I'm allowed to ask here :)

[Buzz]

Most of this issue is just because there is no content on the page. If the page had content to display then #wrapper will expand vertically to show the content and in turn the background would expand with it.

---> Revised page (http://www.supervector.com/dude/comp/index.html)

Cleaned up the CSS and removed a few position, z-index, and display properties. Adjusted background image properties to be set in shorthand rather than 3 or 4 properties for each item. Removed two internal floats (bad idea). It's best to have one solid column and one floating column. If you float everything, you experience the issues you are. There should be one set item. What I did was float the news column to the right, then simply added an appropriate amount of margin to the mainbody id and removed it's float. I also adjusted the html file for this too. Moved the news div above the mainbody div to set the float right properly. (set right floating items above left items in the html).

[dudeking]

Okay, I'll see what happens when the site develops.
I'm really seeing the evil side of web design now, when I was working with tables I didn't really see what the big deal was about but now css...it's pure evil. lol

I might start designing in opera, it's a nice browser...every thing seems to work in there:D

Thanks for all your help Scott

[Buzz]

CSS can take a bit more understanding when coding, but it is fewer lines of code. And next week.. when you want to move the side bar from the right side to the left side for all pages, it's a change to 2 lines of code, not every single page of the site. Or a month from now when you want to completely redesign the site, you just changes the CSS file, not every page.

[dudeking]

I will get the hang of it, might just take a while :D

Thanks for your help mate :)