CSS Forum

**prodigy64** · 05-15-2009, 11:42 PM

Hey.
I have a problem. I am having 2 content boxes next to each other. Together they = 1000px. One is 400px and the other is 600px. Same height.
Well the 400px one will go where I want it and when I try to place the 600px one, it goes underneath the 400px one. I want it to the right, not underneath.
Heres the html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PG-EVO</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="bg">
<div class="body">
<div id="header"></div>
<div id="userpanel"></div><div id="games"></div>

</div>
</div>
</body>
</html>

And heres the css:

Code:

@charset "utf-8";
.body {
    width: 1000px;
    height:auto;
    margin:0 auto;
    text-align: left;
}
#header {
    width:1000px;
    height:135px;
    background-image:url(header.jpg);
    margin:0 auto;
    text-align: left;    
}
#bg {
    width:1120px;
    background-image:url(img/bg.gif);
    margin:0 auto;
}
#userpanel {
    width: 400px;
    height: 200px;
    background-image:url(img/user_bg.jpg)
}
#games {
    width:600px;
    height:200px;
    background-image:url(img/game_bg.jpg);
}
    
#sections {
    background-image:url(img/bg_sec.jpg);
    height:25px;
}

It's a pretty poor coded website. But I am learning to make my skills better. Help would be greatly appreciated.
Thanks

**Warner Design** · 05-16-2009, 02:27 AM

There are many solutions for this problem but here is my quick fix.

In your css file:

#userpanel {

width: 400px;
height: 200px;
background-image:url(img/user_bg.jpg);
}
#games {
margin-top: -200px;
margin-left: 400px;
width:600px;
height:200px;
background-image:url(img/game_bg.jpg);
}

I see some other weird things in your code but i don't know what your trying to ultimetly accomplish so I dont know if it is needed (example: why so many div tags).

Hope this helps

**LadynRed** · 05-16-2009, 02:35 PM

Quote:

Well the 400px one will go where I want it and when I try to place the 600px one, it goes underneath the 400px one. I want it to the right, not underneath.

The example given above will NOT work if you want the columns NEXT to each other. In order to get them side by side, you'll have to FLOAT one or both of them.

Also note that IE6 in particular has issues with very tight layouts, so you need to be careful and NOT add margins and padding to both boxes.