|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
December 6th, 2006, 12:02 AM
|
|||
|
|||
|
2 column layout problem
I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck.
Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad
|
|
#2
December 6th, 2006, 06:21 AM
|
||||
|
||||
|
Just give #content_left float:left;.
Why are you using XHTML? Either add the xmlns attribute to the <html> tag or switch to HTML 4.01 Strict. After that please fix your X/HTML errors. There are better clearing techniques that don't require extra markup. I suggest you read up on clearing and containing floats. Also, you shouldn't put quotes around generic font-family names.
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around. Check out my blog.
|
|
#3
December 6th, 2006, 08:32 AM
|
|||
|
|||
|
Thanks Kravvitz,
I gave #content_left float:left and now it's screwed up in FF as well as IE. One pro is at least they look the same. So what might be causing that? Also: I fixed the Doctype. I'm reading the clearing techniques now and will fix that soon. I removed the quotes. Thanks! Brad
|
|
#4
December 6th, 2006, 11:42 AM
|
||||
|
||||
|
IE's float model isn't quite right. IE7's is a little better than IE6's.
Due to the left padding you put on #content when you float #content_left as well as #content_right, there isn't enough room for both next to each other. Don't forget to add some background colors in case the background images fail to load. Also be sure to fix the HTML errors soon. IE4 isn't handling your CSS well. (I noticed the url() wrapper, so I thought I'd see how bad it looks. I wouldn't have bothered to look otherwise.) Using double-quotes instead of the url() wrapper will hide the stylesheet from it. (Single quotes will hide the stylesheet from IE5/Mac as well.) Code:
@import "stylesheet.css";
|
|
#5
December 6th, 2006, 01:02 PM
|
|||
|
|||
|
OK that worked great once I made the left content div a bit smaller. I added the background colors to the content divs and it shows another issue I've been fighting.
The #content_right div is giving me size fits. If I make it 300px wide it looks great but when I give it a bg color it cuts into the bg image because it's too wide. When I make it 250px wide it shifts way over to the right. I've looked for margin & padding in other styles that might be causing the problem but they haven't seemed to fix it. this is happening in both IE & FF. If I don't specify a bg color it looks great. You've been extremely helpful so far. Thank you very much. Edit--- I changed the width of #content_right & #content_left to percentages rather than px and that fixed this issue in FF but not IE. Last edited by sonicparke : December 6th, 2006 at 02:16 PM.
|
|
#6
December 6th, 2006, 10:30 PM
|
||||
|
||||
|
It looks ok in IE6+7 for me with the percentage widths.
You could do something like this: Code:
#content-left * {
background-color: #fff;
}
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > 2 column layout problem |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
