Float - Float clear help needed
Hi, i'm pretty new to CSS floats and am having a few issues getting a layout working in Internet Explorer.
I have a main container and inside that i have two more floating left and right.
This is fine but i've now put a container in the left floating container and set the contents of that to float left and it has screwed the layout.
The main floating right container is now underneath the main left float in IE and i can't get it to stop doing it.
I guess i need to use float clear but after quite a while reading i still can't get it displaying correctly.
This is my css:
Main container
div.content_container { width: 784px; height: auto; margin-left: auto; margin-right: auto; background-color: transparent; }
Main left container
div.content_left { float: left; width: 470px; height: auto; overflow: hidden; background-color: transparent; display: inline; text-align: left; }
Main right container
div.content_right { float: left; width: 283px; overflow: hidden; background-color: #F6F6F6; display: inline; margin-left: 31px; height: auto; text-align: left; }
Inside the left container i have the following elements
div.content_left_packages { width: 470px; height: auto; background-color: transparent; text-align: left; padding: 0px; margin: 0px; }
Inside the above container i have the following
div.content_package_one { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }
div.content_package_two { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }
div.content_package_three { width: 150px; height: auto; background-color: #f6f6f6; display: inline; float: left; }
Between the three containers above i have the following spacer container
div.content_package_spacer { width: 10px; height: 10px; background-color: transparent; display: inline; float: left; }
Then inside each of the three package containers i have the following
div.content_package_description { width 113px; height: auto; margin-left: 18px; margin-top: 3px; }
div.button_arrow { position: relative: bottom; 4px; float: right; }
Like i said earlier, i've spent a while reading and poking the code to get this displaying correctly in IE. It just wont work. So if anyone out there could give me some help i'd really appreciate it.
Thanks
decibel.places posted this at 18:50 — 24th June 2008.
He has: 1,494 posts
Joined: Jun 2008
Hello Andrew,
Since this is your first post allow me to welcome you to The Webmaster Forums, on behalf of the community.
If you wish you can tell us a little more about yourself in Introductions
Please post a link to the page you are discussing so that we may examine the code and better help you.
greg posted this at 16:32 — 25th June 2008.
He has: 1,581 posts
Joined: Nov 2005
I guess more advanced CSS coders (*cough* Megan) will usually get it right first time or know what the error is, but I often have situations like you where I am left scratching my head.
So when I use float in CSS, and a problem occurs with layout, I often stick a different coloured border around each of the divs.
border: 1px solid red, border: 1px solid green
etc
Most times this reveals the issue to me - a div is too wide/high or not floating properly etc
It usually shows me that the top level parent div needs to be floated left to get the floating child divs to actually go inside the parent div
At quick glance at your code, I notice you have a div with margin left auto, then inside that div you have a div that floats left, this child div floating left will push the parent div to the left and stop its auto left margin.
In my experience anyway. This might not be what is supposed to happen and I just have something else wrong somewhere.
One other thing I found which someone else here might be able to add an explanation for, when using a layout like Andrew's with a floating div inside a floating div inside a non floating div, I often find the float doesn't work as expected.
Then when I float: left the top level parent div as well, it corrects the float on the child divs (the ones the parent contains).
I do find divs a bit weird sometimes in the logic they are structured, and more so when using float on them.
For example, one occasion I had a floated div inside a non floated div, but to float the child div correctly and remain inside the parent div and stretch the parent div as you would expect I had to clear floats BEFORE the child div code, even though I hadn't set any floats UNTIL I drew the child div.
Weird.
andrewtayloruk posted this at 12:48 — 26th June 2008.
They have: 17 posts
Joined: Jun 2008
Thanks for the reply greg. It wasn't a problem with clearing the floats at all. I used an editor i wasn't familiar with and somehow ended up with a couple of closing tags that shouldn't have been there.
I removed those and it fixed the issue. I didn't notice these were here until i opened the code in my usual editor and none of the stuff relating to the floats were indented.
Doh!
greg posted this at 14:19 — 26th June 2008.
He has: 1,581 posts
Joined: Nov 2005
Glad you got it sorted.
My head hurts sometimes with end tags for multiple divs in divs, especially when each div is full of PHP doing if's echoes and whatnot!
decibel.places posted this at 14:41 — 26th June 2008.
He has: 1,494 posts
Joined: Jun 2008
you can comment your end tags if it gets confusing
indenting is also a good idea, Andrew, but sometimes the code will end up without the indents and then what?
andrewtayloruk posted this at 15:14 — 26th June 2008.
They have: 17 posts
Joined: Jun 2008
I already comment my start and end tags.....
I don't see what you mean about code ending up without indents. My issue was with Slick edit trying to indent everything it's way rather than letting me do it manually.
decibel.places posted this at 15:26 — 26th June 2008.
He has: 1,494 posts
Joined: Jun 2008
I don't see what you mean about code ending up without indents. My issue was with Slick edit trying to indent everything it's way rather than letting me do it manually.
you used the bbcode tags and not the html ones for <code> - or you can use the Code button in the editor toolbar here
and if you want to show a tag here with <sometag> you need to use the html entities < > to open and close the tag
regarding losing indents, for example if you edit your file in the file manager editor on your control panel interface, or sometimes if you download the file certain ways, you might lose the formatting.. or view it in other encoding eg view a utf8 encoded file with ansi encoding, possibly, I think - I just know I have seen the indents go away in certain situations
Slick edit sounds not so slick - use a good text editor that doesn't "help" you too much - I use EditPlus
andrewtayloruk posted this at 15:30 — 26th June 2008.
They have: 17 posts
Joined: Jun 2008
I don't use slick edit. I use Coda for the Mac. http://www.panic.com/coda/
I've never touched an online editor in my life, i prefer to stick to the command line and VI.
Thankfully i was only using slick edit on a friends laptop and wont be needing it again.
andrewtayloruk posted this at 14:37 — 26th June 2008.
They have: 17 posts
Joined: Jun 2008
I was using slick edit on a friends machine and it was a right pain in the backside to use. When you open a tag it automatically adds the closing tag 2 lines beneath. Great, but if you press the down arrow it puts another div in between the tag you just opened and the closing tag.
I loaded the code in Coda at home and instead of nice and tidy code i was presented with a mess which led me to check the tags.
I guess i should have run a css validator on it and it would have flagged the extra tags.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.