Wrapper inside wrapper ? [Archive]

Pazza

19-04-2009, 12:55 PM

Hey,

Right , I have another thread but i've redone some of it, and i've figured out its to do with the wrappers.

I have:
#wrapper {margin-left:auto;
margin-right:auto;
width:796px;
} Which is for everything.

Then I have:
#wrapper2 {width:222px; float:right; margin-top:126px;} , which is to keep 3 boxes together along the right, and is supposed to be aligned with the main content box, but instead of doing the margin from the top of the first wrapper, its doing it from the bottom of the first wrapper.

Here is the whole css code:

@charset "utf-8";
/* CSS Document */
body {
text-align: center;
background-color: #ffffff;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
}

#wrapper {margin-left:auto;
margin-right:auto;
width:796px;
}

#header {background-image:url(images/header.png);
margin-top:0;
width:796px;
height:126px;
}

#undernav {background-image:url(images/rightundernav.png);
width:222px;
height:29px;
float:right;
}

#maintop {background-image:url(images/maintop.png);
width:574px;
height:14px;
float:left;
}
#mainmid {background-image:url(images/mainmid.png);
width:574px;
float:left;
min-height:300px;
}
#mainbot {background-image:url(images/mainbot.png);
width:574px;
height:4px;
float:left;
}
#wrapper2 {width:222px; float:right; margin-top:126px; }
#right1top {background-image:url(images/rightheader1.png);
width:222px;
height:26px;
float:right;
display:inline;
overflow:hidden;
}
#right1mid {background-image:url(images/rightmid1.png);
width:222px;
min-height:50px;
margin-left:-1px;
float:right;
display:inline;
overflow:hidden;
}
#right1bot {background-image:url(images/rightbot1.png);
width:222px;
height:4px;
margin-left:-1px;
float:right;
display:inline;
overflow:hidden;
}

#right2top {background-image:url(images/rightheader2.png);
width:222px;
height:26px;
float:right;
display:inline;
overflow:hidden;
}
#right2mid {background-image:url(images/rightmid2.png);
width:222px;
min-height:50px;
float:right;
display:inline;
overflow:hidden;
}
#right2bot {background-image:url(images/rightbot2.png);
width:222px;
height:4px;
float:right;
display:inline;
overflow:hidden;
}

#right3top {background-image:url(images/rightheader3.png);
width:222px;
height:26px;
float:right;
display:inline;
overflow:hidden;
}
#right3mid {background-image:url(images/rightmid3.png);
width:222px;
min-height:50px;
float:right;
display:inline;
overflow:hidden;

}
#right3bot {background-image:url(images/rightbot3.png);
width:222px;
height:4px;
float:right;
display:inline;
overflow:hidden;
}

The index 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>Here you go :P</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />

<body>
<div id="wrapper">
<div id="header"></div>
<div id="undernav"></div>

<div id="maintop"></div>
<div id="mainmid"><?php include ("main.txt")?></div>
<div id="mainbot"></div>


<div id="wrapper2">
<div id="right1top"></div>
<div id="right1mid"><?php include {"1.txt")?></div>
<div id="right1bot"></div>

<div id="right2top"></div>
<div id="right2mid"><?php include ("2.txt")?></div>
<div id="right2bot"></div>

<div id="right3top"></div>
<div id="right3mid"><?php include ("3.txt")?></div>
<div id="right3bot"></div>
</div>

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

Live link is here http://www.izcool.com/lucas1/

+rep for any help :)