CSS need help

yhack

yhack

yhack

Soldato
Joined
6 Jan 2005
Posts
3,633
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
 
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)
}
 
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?
 
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.
 
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?
 
You must log in or register to reply here.
Back
Top Bottom