WordPress.org

1. jay@grimestore
   Member
   Posted 3 years ago #

   I am currently working on the theme displayed at http://www.grimedigital.com/wordpress/wordpress/

   I have created two headers, one to act as the normal header then the second to contain data about bunch of websites we run so that people can navigate to them wherever they are on the blog. Both headers are setup as I want them so that they span the whole with of the page. I am now having trouble making the main content and sidebar fixing to the center of my layout.

   css
   

   /* The Reset ---------------------------------- */
   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,
   h6,pre,form,fieldset,input,p,blockquote,table,
   th,td { margin: 0; padding: 0; }
   fieldset,img,abbr { border: 0; }
   address,caption,cite,code,dfn,em,h1,h2,h3,
   h4,h5,h6,th,var { font-style: normal; font-weight: normal; }
   caption,th { text-align: left; }
   q:before,q:after { content: ''; }
   a { text-decoration: none; }
   body {
   	font-size: 62.5%;
   	background: #fff;
   	font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
   	line-height: 22px;
   	color: #555;
   	margin-bottom: 40px;
   }
   /* -------------------------------------------- */
   
   body    {
   	text-align: center;
           margin-top: 0pt;
           margin-right: 0pt;
           margin-bottom: 0pt;
           margin-left: 0pt;
           padding-top: 0pt;
           padding-right: 0pt;
           padding-bottom: 0pt;
           padding-left: 0pt;
   }
   
   .wrapper {
   	width: 960px;
   	margin: 0 auto;
   	clear: both;
   
   }
   
   #header {
   	height: 88px;
   	min-width: 960px;
   	background: #464646;
   }
   
   #header2 {
   	background: #e4f2fd;
   	min-width: 960px;
   	min-height: 351px;
   	border-bottom: 1px solid #c6d9e9;
   }
   
   #content {
           background: #111111;
           border: 0px #111111 solid;
   	width: 692px;
   	float: left;
   
   }
   
   #sidebar {
           background: #222222;
           border: 0px #222222 solid;
   	width: 212px;
   	float: right;
   }
   
   #both {
   	clear: both;
   }
   
   #footer {
           border: 1px #333333 solid;
   	background: #333333;
   }

2. chaoskaizer
   Member
   Posted 3 years ago #

   part of your CSS is referring to a wrong selector (div#wrapper). FYI the single dot is for classname-selector HTML attributes and # hash is for id selector.
   try change .wrapper to #wrapper & set the wrapper width to 904px (692 + 212)

3. jay@grimestore
   Member
   Posted 3 years ago #

   part of your CSS is referring to a wrong selector (div#wrapper). FYI the single dot is for classname-selector HTML attributes and # hash is for id selector.
   try change .wrapper to #wrapper & set the wrapper width to 904px (692 + 212)

   My problem when doing this is that the two headers which are also contained in the wrapper shrink to the width of the wrapper when I want them to continue to the edges of the page and only the Content and Sidebar div's to be restricted to 904px.

4. design_dolphin
   Member
   Posted 3 years ago #

   This should do the trick.

   #wrapper {
   text-align:center;
   width:100%;
   }
   
   #main {
   margin: 0 auto;
   width:904px;
   }

   @chaoskaizer is correct though. You will have to pay attention that the selector tags match otherwise it is not recognized. Let me know if for some change it doesn't work.

Topic Closed

This topic has been closed to new replies.