1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS need help

Discussion in 'HTML, Graphics & Programming' started by yhack, 16 Jan 2006.

  1. yhack

    Mobster

    Joined: 6 Jan 2005

    Posts: 3,636

    Location: Cambridge

    http://www.yhack.co.uk

    The two boxes wont go next to each other! One is underneath, how do I make them go side by side?

    Code:
    #middle{
    width:400px;
    height: 600px;
    border: 1px solid #000000;
    background:#999999;
    }
    #right{
    width:200px;
    height: 600px;
    border: 1px solid #000000;
    background:#999999;
    }
    The bigger one is #middle

    Thanks
     
  2. Johnny

    Associate

    Joined: 2 Jan 2006

    Posts: 11

    try:
    display: block;

    not sure it will work, but worth a try :/
     
  3. Jake 2.0

    Banned

    Joined: 16 Dec 2002

    Posts: 10,237

    you need to add: (or try atleast)

    middle {
    position:relative;
    float left;
    }
    right {
    position:relative;
    float right;
    }

    (dont replace this just add them to your existing css)
    }
     
  4. yhack

    Mobster

    Joined: 6 Jan 2005

    Posts: 3,636

    Location: Cambridge

    Thanks, but it won't work :(

    Code:
    #middle{
    width:400px;
    height: 600px;
    border: 1px solid #000000;
    background:#999999;
    position:relative;
    float:left;
    }
    #right{
    width:200px;
    height: 600px;
    border: 1px solid #000000;
    background:#999999;
    position:relative;
    float:right;
    }
    this is the code now, have I done it wrong?
     
  5. D4VE

    Sgarrista

    Joined: 23 Oct 2003

    Posts: 8,899

    Location: Hampshire, UK

    What total width are you aiming for?

    You've got: 400+2(border) +200+2(border) = 604px.
    Funny width, if you are aiming for 600 you need to make the widths 398+border and 198+border.
     
  6. yhack

    Mobster

    Joined: 6 Jan 2005

    Posts: 3,636

    Location: Cambridge

    lol thanks :)
     
  7. thesubstitute

    Wise Guy

    Joined: 26 Jul 2004

    Posts: 1,073

    Location: Birmingham

    Figured there're lots of things that needs changing so I just edited your source and here's what I used instead:

    http://h3lp.guiltyvictim.com/060117_yhack.html

    One particular thing to note is that I wrapped your sidebar and content (right and middle) in another div element called #body, and gave it border and background colour to cover both the sidebar and content in one go.
    This is to overcome a problem with IE's box model where magic margin is added creating a gap in between the two elements.

    Also I've wrapped the entire page in a div tag, giving it width and centered it instead of applying width to all the elements individually. This allows you to change the width of the site easily in the future by simply reapplying the width to the top level element. I didn't apply width to the html body to ensure browser compatibilities.

    Finally I've rearranged the content and sidebar's html location and only floated the sidebar instead of both sidebar and content.

    Otherwise it was mostly just a clean up of the html and the form to remove span tags and necessarily classes that I assume were generated by dreamweaver?
     
  8. yhack

    Mobster

    Joined: 6 Jan 2005

    Posts: 3,636

    Location: Cambridge

    Woah thanks!!
    Yeah, I did use some things in dreamweaver because I'm lazy :)