HTML and CSS problem

Ryan55

11-20-2010, 01:22 PM

Hello,

I have been coding a layout and came to a problem in which the bit on the right is half the size of the same bit on the left whereas it should be the same size.

The link is - http://www.extremehabbo.com/extremev2habbo

The HTML is
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>ExtremeHabbo</title>
</head>
<body>
<div id="container">
<div id="banner"><img src="http://www.freewebs.com/habbo-planet-sg/unofficial.gif" /></div>
<div id="floatleft">
<div id="left">
<div id="side_main_top"></div>
<div id="side_main_mid"><br /><br /></div>
</div></div>
<div id="floatright">
<div id="right">
<div id="mover">
<div id="side_main_top"></div>
<div id="side_main_mid"><br /><br /></div>
</div></div></div>
<div id="center">
Hi
</div>
</div>
</body>
</html>

The CSS is
body {
background: url(images/bg.gif);
margin: 20px 0px 0px 0px;
}

#floatleft {
float: left;
}

#floatright {
float: right;
}

#container {
width:1000px;
margin-left: auto;
margin-right: auto;
}

#left {
width: 228px;
height: auto;
}

#center {
width: 448px;
height: auto;
}

#right {
width: 228px;
height: auto;
}

#mover {
margin-left: -98px;
}

#banner {
background: url(images/eh.png);
background-repeat: no-repeat;
width: 902px;
height: 151px;
padding-top: 35px;
padding-left: 30px;
}

#side_main_top {
background: url(images/eh_r3_c2.png);
width: 228px;
height: 15px;
margin-top: -35px;
}

#side_main_mid {
background: url(images/eh2.png);
width: 228px;
height: auto;
}

what is the problem and how can i fix it?

abduraooft

11-20-2010, 01:28 PM

If you are trying to make a 3 column layout, refer http://bonrouge.com/3c-hf-fluid.php

Excavator

11-20-2010, 05:15 PM

Hello Ryan55,
ab is right, that bonrouge link is a good 3 column. Here is another, very simple 3 column example (http://nopeople.com/CSS/simple3column/index.html).

Your code has issues with the box model (http://www.w3.org/TR/CSS2/box.html), and other problems as well.
Your #right is 228px wide but you put 326px width of content in it. The box model shows your content cannot exceed the width of it's container - margin and padding count when figuring that total width.
Even your negative margin counts, which may seem counterintuitive.

Not sure why the negative margin...

Try making your CSS look like this - body {
background: #fc6; /*because that snow was driving me nuts*/
margin: 20px 0px 0px 0px;
}
#container {
width:1000px; /*might work better at 902px?*/
margin: 0 auto;
background: #ff0; /*for demonstration only*/
overflow: auto; /*to clear the floats*/
}
#banner {
background: url(images/eh.png);
background-repeat: no-repeat;
width: 902px;
height: 151px;
/*padding-top: 35px;
padding-left: 30px;*/
}
#floatleft {
width: 228px; /*because floats neeed a width*/
float: left;
}

#floatright {
width: 228px; /*because floats neeed a width*/
float: right;
}
#right {
width: 228px;
height: auto;
}
/*#mover {
margin-left: -98px;
}
#side_main_top {
background: url(images/eh_r3_c2.png);
width: 228px;
height: 15px;
margin-top: -35px;
}*/

#left {
width: 228px;
/*height: auto;*/
}

#center {
height: 400px;
margin: 0 228px;
background: #fff;
/*width: 448px;
height: auto;
position: relative;*/
}

#inner_container {
/*padding-bottom: 80px;*/
} (the /* ... */ are comments that stop the bits of CSS they surround. I commented out a lot of your CSS instead of just removing it, that way you can see the bits that are causing your problems.