Simple CSS question
Simple CSS issue (I think). Check out this page and you'll see I use "float: left" on the navigation, but when the main content area gets big enough it flows around the menu. I realize that this is exactly what float is supposed to do and it's a nice effect but it's not what I wanted to happen. How can I keep the main content area and the navigation sepeated left and right? In other words, how do I either A) make the navigation take up all the space below it so it forces the main content area over, or B) make the main content area not flow left when it gets to the bottom of the menu.
Thanks a bunch!
Dragon of Ice posted this at 23:14 — 13th July 2004.
He has: 578 posts
Joined: Jun 2004
I beleive that using "height:auto" would work, but I'm new to css. Just a guess.
Abhishek Reddy posted this at 00:03 — 14th July 2004.
He has: 3,348 posts
Joined: Jul 2001
What you want is a two-column layout:
http://www.bluerobot.com/web/layouts/
http://glish.com/css/
http://www.alistapart.com/articles/fauxcolumns/
http://www.alistapart.com/articles/negativemargins/
gohankid77 posted this at 03:37 — 14th July 2004.
They have: 11 posts
Joined: Jul 2004
You could use
davidjaymz posted this at 08:00 — 14th July 2004.
He has: 193 posts
Joined: Jul 2001
I'd agree with abhishek look into two column layouts.
you could use a "prop" to make it longer than (or as long as) your main content but then you'd be setting a 2 column layout with out the centre column and it'd be easier to do the 2 column thing.
DJ
fifeclub posted this at 15:45 — 14th July 2004.
He has: 688 posts
Joined: Feb 2001
I've been fiddling with this for a while now (offline).
Adding a "float: left" to the main area (after the menu already had a "float: left") fixes the problem easily in MSIE but in Firefox it forces the main area down underneath the menu. Adding a "overflow: auto" to the main area fixes the problem in Firefox but ruins it again in MSIE. And combining float and overflow just doesn't work either. Absolute positioning works well but the right side of the main menu never lines up correctly wit the body margin I set for the whole page.
QUESTION: I was trying to do everything in CSS but is it all that horrible if I used a two column table for this? Tables are still valid HTML so what's the harm, as long as I control the variables of the table (heights widths bordes backgrounds etc) via CSS?
davidjaymz posted this at 16:03 — 14th July 2004.
He has: 193 posts
Joined: Jul 2001
If you wanna do it in CSS look seriously at the two colum layouts suggested above. http://bluerobot.com/web/layouts/layout1.html is virtually like what you have done so far.
Tables are still valid because your meant to use them for tabled content. NOT for website layout. sorry buddy but thats the way it is.
DJ
andy206uk posted this at 08:32 — 16th July 2004.
He has: 1,758 posts
Joined: Jul 2002
Bear with it mate! CSS takes some getting used to, it's a whole new way of designing but trust me! it's TOTALLY worth it! (once you learn to mark up your (x)html correctly you can change the whole design just by changing the stylesheet!
I've been toying with an idea of changing my blogs colour scheme based on the time of day (light green in the morning, bright green during the day and dark green at night!). Should be fun!
Andy
Abhishek Reddy posted this at 08:49 — 16th July 2004.
He has: 3,348 posts
Joined: Jul 2001
For a moment I thought you were talking about the hair...
fifeclub posted this at 16:50 — 20th July 2004.
He has: 688 posts
Joined: Feb 2001
UPDATE:
Incase this helps anybody else, I solved the problem and it was very simple.
http://www.shootingstorm.com/index2.php (no links on that page work)
#navigation {float: left; width: 120px;}
#content {margin-left: 145px;}
That was all it needed was a simple margin-left on the content area. I haven't tested all possible browsers but it's 100% valid code and works in Firefox and Internet Explorer.
P.S. This is my first valid XHTML page (as opposed to valid HTML4) and my first page that relies almost entirely on CSS for display. Woo!
andy206uk posted this at 08:36 — 21st July 2004.
He has: 1,758 posts
Joined: Jul 2002
You got it! Nice one!
lol... would be a tough challenge. I'm tempted to try it though!
Andy
davidjaymz posted this at 08:49 — 21st July 2004.
He has: 193 posts
Joined: Jul 2001
Looks good. Well done
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.