When DIVs float, how do I put them next to each other?

Discussion in 'CSS' started by dcoops, May 24, 2008.

  1. #1
    Here's the url in question: http://tinyurl.com/662llw (safe)
    NOTE: It's ok in FF and newer browsers, but IE 6.0 and below doesn't work. If someone has IE 7.0, please let me know how it looks!

    I have the main column and the sidebar:

    #main {
    	float: right;
    	width: 515px;
    	padding: 0; margin: 0;
    	display: inline;		
    }
    HTML:
    and

    #sidebar {
    	float: left;
    	width: 200px;
    	padding: 0; margin: 15px 0 0 0;		
    	display: inline;	
    }	
    HTML:
    Why is the sidebar so low in IE?
     
    dcoops, May 24, 2008 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    The word Menu lines up perfectly with the words Home Page in IE7.

    Not sure I would waste a lot of time making it work for an obsolete browser like IE6.
     
    Colbyt, May 25, 2008 IP
  3. fabriciogr

    fabriciogr Active Member

    Messages:
    958
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    73
    #3
    you also have a menu issue on IE6.. the top half of each word is being cut off..

    the css example you've pasted seems fine... i personally know how annoying it can be to validate work on 3+ browsers every day....

    first step try adding borders to each of your div's just too see it's not a width issue.. as IE6 always lets divs grow if their inner content is pushing outwards..

    another quick test would be trying to add: "clear:none" to both your div's

    like i mentioned ur css is fine i tend to think it's a width issue. try playing with the site with empty div's at first.. just to make sure they all align up correctly later add content to the div's... it'll be easier to pinpoint the cause this way.
     
    fabriciogr, May 25, 2008 IP
  4. dcoops

    dcoops Guest

    Messages:
    218
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    @fabriciogr thanks for your advice, I'll implement them and post back here how it goes.
    @colbyt, I wish I could ignore it, but I'm making it for a friend and he's paying me, and he picked it up! So I sorta gotta fix it! :)
     
    dcoops, May 25, 2008 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Start by fixing your 32 XHTML validation errors. You may also want to consider cleaning up those CSS warnings as well since they could cause accessibility issues for those who use their own custom user stylesheets.
     
    Dan Schulz, May 25, 2008 IP