Wrapper inside wrapper ?

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:

PHP Code:


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

Which is for everything.

Then I have:

PHP Code:


#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:

PHP 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:

PHP 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>

<!-- right boxes -->
<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

Meti · 20-04-2009, 05:05 PM

try removing the float: right; in wrapper2, and change to float: left;

~~Wouter~~ · 21-04-2009, 07:51 PM

Try not putting a wrapper in a wrapper, have them seperate, then put a div inside a div.

Thread: Wrapper inside wrapper ?

Thread Tools

Wrapper inside wrapper ?

Posting Permissions