Help with fixed width DIV layout

Discussion in 'Web Design' started by klucid, Aug 25, 2008.

to remove all ads.
  1. klucid

    klucid New Member

    Messages:
    1
    Hi all I'm new here...

    I need help with some general DIV issues. I'm using Drupal, and I'm tweaking the theme to get a fixed width DIV layout, but the header and wrapper tags are not aligned at small resolutions! Any ideas?

    Thanks in advance!

    http://klucid.com

    HTML:
    /*
    **    Copyright 2008  Klucid
    
    /*
    ** HTML elements
    */
    
    body {
      cursor: crosshair;
      font: 12px Arial;
      color: #333;
      margin:0 auto;
      background-color: #959595;
     }
    tr.odd td, tr.even td {
      padding: 0.3em;
    }
    h1, h2, h3, h4 {
      color: #cccccc; 
      font-size: 28px;
      font-family: verdana,Tahoma,sans-serif;
      margin-bottom:20px;
      font-weight:normal;
      letter-spacing: -1pt;
    }
    h1 {
      font-size: 200%; 
    }
    h2 {
      font-size: 150%;
    }
    h3, h3 a {
      font-size: 150%;
      line-height:1.2;
      color: #3B4A25;
      letter-spacing: 0px;
      text-decoration: none;
    }
    h4 {
      font-size: 120%;
      line-height:1.25; 
      font-weight:bold;
    }
    h5 {
      font-size: 1em;
      font-weight:bold;
    }
    h6 {
      font-size: 1em;
    }
    p {
      margin: 10px 0 15px;
    }
    a {
      text-decoration: none;
      color: #576780;
    }
    a:hover {
      text-decoration: none;
    }
    blockquote {
    	text-transform:uppercase;
    	font-size: 8pt;
    	line-height: 14pt;
    	text-align:justify;
    	width: 300px;
      margin: 1.5em 1.5em 1.5em 1.5em;
      color: #ababab;
      border: 1px #b0b0b0;
      background-color: #ffffff;
      padding: 0 10px 0 50px;
    }
    hr {
      background: #B2CCFF; 
      color: #B2CCFF;
      clear: both; 
      float: none; 
      width: 100%; 
      height: 0.1em;
      margin: 0 0 1.4em 0;
      border: none; 
    }
    * html hr { margin: 0 0 1.2em 0; } /* IE6 fix */
    pre {
      margin-bottom: 1.3em;
      background: #eee;
      border:0.1em solid #ddd;
      padding:1.5em;
    }
    input {
      border: 1px solid #cccccc;
    }
    ul {
      list-style-type: none;
    }
    
    li a.active{
      color: #000;
    }
    ol {
      margin-left: 35px;
    }
    /*
    ** Page layout blocks / IDs
    */
    
    #header {
      width: 800px;
      margin: 0 auto; 
      padding: 0 112px;
      height: 169px;
      border-bottom: 0px;
      background-image: url('images/header.gif');
      background-repeat: no-repeat;
      background-position:top center;
      background-attachment:scroll;
    
    }
    
    #wrapper {
     width:800px;
     margin:0 auto;
     background-image: url('images/bg.gif');
     background-repeat: repeat-y;
     background-position: top center;
     background-attachment:fixed;
     padding: 0 112px;
    }
    
    .content{
    	margin-bottom: 50px;
    	border-bottom: 1px #cccccc dotted;
    	padding-left: 20px;
    	}
    
    #main p {
    	color: #ababab;
    	line-height: 18pt;
    }
    
    #main {
     text-align: justify;
     width: 480px;
     margin: -30px;
     float:left;	
     border: 0px solid #e7f9fb;
     padding: 8px;
     background:transparent;
     padding-top: -40px;
    }
    #sidebar-left, #sidebar-right {
     vertical-align: top;
      z-index:2;
    }
    	
    .block h2 {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	text-transform:uppercase;
    	letter-spacing: 2pt;
      background:#ffffff url('') repeat-x;
      margin: 0;
      font-size: 8pt;
      padding: 0px 0 20px 20px;
      color: #cccccc;
      border: 1px dotted #cccccc;
      border-width: 0px 0px;
    }
    #sidebar-left {
     width: 0px;
     float:left;
     position:relative;	
    }
    #sidebar-right {
     background-color: transparent;	
     text-align: justify;
     margin-top: 45px;
     width: 225px;
     float:right;
     margin-left: -100px;
     position:relative;
     z-index:2;
     color: #b0b0b0;
     border-width: 1px;
     padding-right:20px;
    }
    
    #h2 {
     height:185px;
     margin:0 auto;
    }
    #header img {
      float:left;
      margin-top:0px;
    }
    #header h1{
     
    }
    
    .site-name {
    	display:none !important;
    	visibility:hidden;
    	}
    	
    .site-name a {
      color: #26647b;
      font-family: Helvetica,Arial,"Lucida Grande",Verdana,sans-serif;
      text-decoration: none !important;
      margin-top:9px;
      display:none;
      float:left;
      font-size:70px;
      font-weight:lighter;
      position:relative;
      left:-4px;
    }
    .site-slogan {
      color: #333;
      width:100%;
      display:block;
      font-weight:bold;
    }
    .search-box {
      float:right;
      margin:10px 20px 0 0;
    }
    .search-box .form-text {
     background: url('images/search.png');
     font-size: 1em;
     color: #000;
     padding: 2px;
    }
    .form-text {
      display:block;
    }
    #primary{
    position: relative;
    top: 20px;
      margin-top: 0;
      margin-left: 15px;
      display:block;
      height:20x;
      background-color: transparent;
      width:100%
      z-index: 5;
    
    }
    
    #header-region {
    }
    
    #primary a {
      cursor: crosshair;
      white-space: nowrap;
      font-family: Arial Narrow,Helvetica,sans-serif;
      color: #ffffff;
      display: block;
      float: left;
      height: 20px;
      line-height: 23px;
      text-transform: uppercase;
      background: transparent 100% 0;
      text-decoration:none;
    }
    #primary a span{
      cursor: crosshair;
      padding: 0px 15px;
      display: block;
      height: 53px;
      float:left;
    }
    #primary a:hover, #primary a:active {
      cursor: crosshair;
      text-decoration:none;
      color: #ababab;
    }
    #primary a.active {
    background: url('images/active-menu-r') no-repeat right top;
    color: #ababab;
    }
    #primary .active span {
    background: url('images/active-menu-l') no-repeat left top transparent	;
    }
    #primary ul{
      margin: auto;
      width: 720px;
    }
    #primary ul.links li {
      padding:0;
    }
    
    .breadcrumb a{
     display: none;
     	}
    
    #mission {
      border:1px solid #cee0e4;
      padding:5px;
    }
    .messages {
     background-color: #eee;
     border: 1px solid #ccc;
     padding: 0.3em;
     margin-bottom: 1em;
    }
    .error {
     border-color: red;
    }
    #footer {
      text-align: center;
      font-size: 0.9em;
      width:800px;
      margin:auto;
    }
    
    .title h2, .title a {
      width: 400px;
      color: #ababab; 
      font-size: 24px;
      font-family: arial;
      margin-bottom:10px;
      font-weight:light;
      letter-spacing: -1pt;
      margin-left: 20px;
      padding: 2px 50px 2px 0px;
    
    }
    h1.title {
      width: 400px;
      color: #ababab; 
      font-size: 24px;
      font-family: arial;
      margin-bottom:10px;
      font-weight:light;
      letter-spacing: -1pt;
      margin-left: 20px;
      padding: 2px 50px 2px 0px;
    
    }
    .block, .box {
     padding: 0 0 1.5em 0;
    }
    #sidebar-left .block{}
    .block {
      display:block;
      border: 0px solid #e7f9fb;
      background: transparent;
      padding:8px;
    }
    .taxonomy, .submitted, .links-node {
      font-size: 11px;
    }
    .taxonomy li, .links-node li {
      border-right: 1px solid #CCC;
    }
    .taxonomy li.last {
      border:0;
    }
    ul.links li {
    padding:0 0.5em 0 0;
    }
    .taxonomy ul.links li {
    padding:0 0 0 0.5em;
    }
    .node .picture {
     border: 0px solid #ddd;
     float: right;
     margin: 0.5em;
    }
    .comment {
    }
    .comment .title a {
    }
    .comment .picture {
     border: 0px solid #abc;
     float: right;
     margin: 0.5em;
    }
    /*
    ** Module specific styles
    */
    .feed-icon img {
      margin:0;
    	padding: 25px;
    }
    #aggregator .feed-source {
     background-color: #eee;
     border: 1px solid #ccc;
     padding: 1em;
     margin: 1em 0;
    }
    #aggregator .news-item .categories, #aggregator .source, #aggregator .age {
     color: #999;
     font-style: italic;
     font-size: 0.9em;
    }
    #aggregator .title {
     margin-bottom: 0.5em;
     font-size: 1em;
    }
    #aggregator h3 {
     margin-top: 1em;
    }
    #forum table {
     width: 100%;
    }
    #forum td {
     padding: 0.5em;
    }
    #forum td.forum a{
    text-decoration:none;
    }
    #forum td.forum, #forum td.posts {
     background-color: #e7f9fb;
    }
    #forum td.topics, #forum td.last-reply {
     background-color: #e7f9fb;
    }
    #forum td.container {
     background-color: #cee1e7;
    }
    #forum td.container a {
     color: #555;
     text-decoration:none;
    }
    #forum td.statistics, #forum td.settings, #forum td.pager {
     height: 1.5em;
     border: 1px solid #bbb;
    }
    #forum td .name {
     color: #96c;
    }
    #forum td .links {
     padding-top: 0.7em;
     font-size: 0.9em;
    }
    #profile .profile {
     clear: both;
     border: 1px solid #abc;
     padding: .5em;
     margin: 1em 0em;
    }
    #profile .profile .name {
     padding-bottom: 0.5em;
    }
    .block-forum h3 {
     margin-bottom: .5em;
    }
    div.admin-panel .description {
     color: #999;
    }
    div.admin-panel .body {
     background: #f4f4f4;
    }
    div.admin-panel h3 {
     background-color: #69c;
     color: #fff;
     padding: 5px 8px 5px;
     margin: 0;
    }
    .node img{
      border:0px solid #CCC;
      margin:5px;
      padding-bottom: 30px;
      padding-top: -25px;
    }
    .poll .bar {
     background:#E7E7E7;
     border:#9C9C9C 1px solid;
    }
    .poll .bar .foreground{
     background:#CECDCE;
     border-right:#9C9C9C 1px solid;
    }
    .block-image IMG{
     border:1px solid #CECECE; padding:3px;
    }
    .block-user ul li{
     list-style-type:none;
     list-style-image:none;
    }
    #block-user-0 ul {
      padding: 3px 2em 3px 0;
    }
    #block-user-1 {
      line-height: 25px;
      font-size:14px;
    }
    span.clear {
      display: block;
      clear: both;
      height: 1px;
      line-height: 0px;
      font-size: 0px;
      margin-bottom: -1px;
    }
    
    .more-link {
    padding-top: 20px;
    }
    
    .book-block-menu {
    	padding-bottom: 20px;
    	}
     
  2. adamblan

    adamblan New Member

    Messages:
    234
    Create a 800px div that encapsulates all content on your page, margin:auto
    Your header & content wrapper can then be displayed as block, or set the width to 100%.
     

Share This Page