Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy wrappers and columns problems

    I'm trying to make this page so that the dark brown has a wrapper going all the way across and the white does too, and also I can't figure out why the white won't center in the page. It was fine until I made two columns in the container.

    (If you see blinking in firefox, I fixed that but it still hasn't updated for some reason. looks fine in chrome.)

    Here is the an example page - http://www.comebackdemos.com/camelot/donate.html

    and the layout.css code:

    Code:
    @import url(navi.css);
    @import url(forms.css);
    @import url(tables.css);
    
    
    body{
    	margin:0;
    	padding:0;
    	font-size:12px;
    	font-family:Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	color:#FFFFFF;
    	background-color:#585C3F;
    	}
    
    img{
    	display:block;
    	border:0;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 15px;
    	margin-left: 0;
    	text-align: right;
    	vertical-align: middle;
    	
    }
    .justify{text-align:justify;}
    .bold{font-weight:bold;}
    .center{text-align:center;}
    .right{text-align:right;}
    .nostart {list-style-type:none; margin:0; padding:0;}
    .clear{clear: both;}
    br.clear{clear:both; margin-top:-15px;}
    a{outline:none; text-decoration:none;}
    
    .fl_left{float:left;}
    .fl_right{float:right;}
    
    .imgl, .imgr{border:1px solid #666666; padding:6px;}
    .imgl{float:left; margin:0 8px 8px 0; clear:left;}
    .imgr{float:right; margin:0 0 8px 8px; clear:right;}
    
    /* ----------------------------------------------Wrapper-------------------------------------*/
    
    div.wrapper{
    	display:block;
    	width:100%;
    	margin:0;
    	text-align:left;
    	background-color: #CBCFB5;
    	}
    
    div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
    	margin:0 0 15px 0;
    	padding:0 0 8px 0;
    	font-size:medium;
    	font-weight:normal;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	border-bottom:1px dotted #362C20;
    	}
    
    .leftcol{
    	color:#362C20;
    	background-color:#FFFFFF;
    	float: center;
    	width: 600px;
    	padding: 0px 10px 10px;
    	height: 95%;
    	font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	font-size: 12px;
    }
    .rightcol{
    	color:#FFFFFF;
    	background:#362C20 url(../images/medcrowns.jpg) repeat fixed;
    	float: right;
    	width: 250px;
    	padding: 0px 10px 10px;
    	height: 95%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-style: normal;
    	font-weight: bold;
    }
    .col1{color:#FFFFFF; background-color:#CBCFB5; border-top:5px solid #362C20;}
    .col2{color:#B6B6B6; background:#362C20;}
    .col2 a{color:#FF9900; background-color:#362C20;}
    .col3{color:#666666; background-color:#FFFFFF;}
    .col4{color:#666666; background-color:#C8CCB3;}
    .col4 a{color:#55392B; background-color:#C8CCB3;}
    .col5, .col5 a{color:#FFFFFF; background-color:#585C3F;}
    
    /* ----------------------------------------------Generalise-------------------------------------*/
    
    #header, #intro, #container, #breadcrumb, #footer, #copyright{
    	position:relative;
    	margin:0 auto 0;
    	display:block;
    	width:960px;
    	}
    
    /* ----------------------------------------------Header-------------------------------------*/
    
    #header{
    	z-index:1000;
    	color:#444444;
    	background-color:#CBCFB5;
    	padding-top: 10px;
    	padding-right: 0;
    	padding-bottom: 90px;
    	padding-left: 0;
    	}
    
    #header #logo{
    	display:block;
    	float:left;
    	margin-top:8px;
    	}
    
    #header h1, #header p{
    	margin:0;
    	padding:0;
    	font-size: 12px;
    	font-weight: bold;
    	}
    
    #header h1{
    	margin:0;
    	padding:0;
    	font-size:50px;
    	border:none;
    	}
    
    #header h1 a{
    	color:#362C20;
    	background-color:#CBCFB5;
    	}
    
    /* ----------------------------------------------Homepage Intro-------------------------------------*/
    
    #intro{
    	padding:30px 0;
    	}
    
    .wrapper #intro li.last{
    	margin:0;
    	}
    
    #intro h1, #intro h2, #intro p, #intro ul{
    	margin:0;
    	padding:0;
    	list-style:none;
    	line-height:normal;
    	border:none;
    	}
    
    #intro .fl_left{
    	display:block;
    	float:left;
    	width:480px;
    	}
    
    #intro .fl_left h1{
    	margin-bottom:20px;
    	font-size:42px;
    	color:#CBCFB5;
    	background:#362C20;
    	border:none;
    	}
    
    #intro .fl_left h2{
    	margin:0 0 10px 0;
    	padding:0 0 8px 0;
    	color:#FFFFFF;
    	background:#362C20;
    	border-bottom:1px dotted #666666;
    	}
    
    #intro .fl_left li{
    	display:block;
    	float:left;
    	width:220px;
    	margin:0 25px 0 0;
    	}
    
    #intro .fl_left p{
    	margin-bottom:10px;
    	line-height:1.3em;
    	}
    
    #intro .fl_left p.readmore{
    	display:block;
    	margin:25px 0 0 0;
    	text-align:right;
    	line-height:normal;
    	}
    
    #intro .fl_right{
    	display:block;
    	float:right;
    	width:420px;
    	height:320px;
    	padding:9px;
    	border:1px solid #CBCFB5;
    	overflow:hidden;
    	}
    
    #intro .fl_right li{
    	margin-bottom:10px;
    	}
    
    #intro .fl_right img{
    	display:block;
    	width:420px;
    	height:320px;
    	}
    
    /* ----------------------------------------------BreadCrumb-------------------------------------*/
    
    #breadcrumb{
    	padding:15px 0;
    	background-color: #362C20;
    	}
    
    #breadcrumb ul{
    	margin:0;
    	padding:0;
    	list-style:none;
    	}
    
    #breadcrumb ul li{display:inline;}
    #breadcrumb ul li.current a{text-decoration:underline;}
    
    /* ----------------------------------------------Container-------------------------------------*/
    
    #container{
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: inherit;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	font-variant: normal;
    	text-decoration: none;
    	font-size: 12px;
    	padding: 0px 20px 20px;
    	text-wrap: unrestricted;
    	float: center;
    	width: 960px;
    	color: #362C20;
    	background-color: #FFF;
    	font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	overflow: auto;
    	position: relative;
    	top: 0px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-left: 100px;
    	}
    
    #container a{
    	color:#000000;
    	background-color:#FFFFFF;
    	}
    
    /* ----------------------------------------------Homepage Latest-------------------------------------*/
    
    #latest{
    	display:block;
    	width:100%;
    	padding:0 0 30px 0;
    	margin:0 0 30px 0;
    	border-bottom:1px dotted #362C20;
    	}
    
    #latest ul, #latest p{
    	margin:0;
    	padding:0;
    	list-style:none;
    	display:inline;
    	}
    
    #latest h2{
    	margin:0 0 15px 0;
    	padding:0 0 8px 0;
    	font-size:14px;
    	font-weight:bold;
    	border-bottom:1px dotted #000000;
    	}
    
    #latest li{
    	display:block;
    	float:left;
    	width:300px;
    	margin:0 30px 0 0;
    	padding:0;
    	font-size: 14px;
    	color: #000
    	}
    
    #latest li.last{
    	margin-right:0;
    	font-size: 14px;
    }
    
    #latest li p.imgholder{
    	display:block;
    	width:290px;
    	height:100px;
    	margin:0 0 15px 0;
    	padding:4px;
    	border:1px solid #362C20;
    	}
    
    #latest a{
    	font-weight:bold;
    	}
    
    /* ----------------------------------------------Content-------------------------------------*/
    
    #content{
    	display:block;
    	float:left;
    	width:inherit;
    	}
    
    #content #latestnews{
    	display:block;
    	width:960px;
    	margin-bottom:35px;
    	}
    
    #content #latestnews h2, #content #latestnews p{
    	margin:0;
    	padding:0;
    	line-height:1.6em;
    	}
    
    #content #latestnews h2{
    	margin-bottom:10px;
    	}
    
    #content #latestnews ul, #content #latestnews li{
    	display:block;
    	width:100%;
    	margin:0;
    	padding:0;
    	list-style:none;
    	}
    
    #content #latestnews li{
    	margin:0 0 15px 0;
    	padding:0 0 15px 0;
    	border-bottom:1px dotted #666666;
    	}
    
    #content #latestnews div.imgholder{
    	display:block;
    	float:left;
    	width:150px;
    	height:150px;
    	margin:0;
    	padding:4px;
    	border:1px solid #666666;
    	}
    
    #content #latestnews div.latestnews{
    	display:block;
    	float:right;
    	width:420px;
    	margin:0;
    	padding:0;
    	}
    
    #content #latestnews p.readmore{
    	display:block;
    	margin-top:10px;
    	text-align:right;
    	font-weight:bold;
    	}
    
    /* ------Comments-----*/
    
    #comments{margin-bottom:40px;}
    
    #comments .commentlist {margin:0; padding:0;}
    
    #comments .commentlist ul{margin:0; padding:0; list-style:none;}
    
    #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
    
    #comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
    #comments .commentlist li.comment_odd a{color:#FF9900; background-color:#F7F7F7;}
    
    #comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
    #comments .commentlist li.comment_even a{color:#FF9900; background-color:#E8E8E8;}
    
    #comments .commentlist .author .name{font-weight:bold;}
    #comments .commentlist .submitdate{font-size:smaller;}
    
    #comments .commentlist p {margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
    
    #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
    
    /* ----------------------------------------------Right Block-------------------------------------*/
    
    #column{
    	display:block;
    	float:right;
    	width:250px;
    	height: 95%;
    	background-color: #996;
    	font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #FFF;
    	margin: 0px;
    	padding: 0px 10px 10px;
    	background-attachment: scroll;
    	background-image: url(../images/medcrowns.jpg);
    	background-repeat: repeat;
    	background-position: left top;
    	border: 1px solid #000;
    	}
    
    #column .holder, #column #featured{
    	display:block;
    	width:300px;
    	margin-bottom:40px;
    	}
    
    #column .holder p{
    	line-height:1.6em;
    	}
    
    #column .holder h2.title{
    	display:block;
    	width:100%;
    	height:65px;
    	margin:0;
    	padding:15px 0 8px 0;
    	font-size:20px;
    	font-weight:normal;
    	color:#666666;
    	background-color:#FFFFFF;
    	line-height:normal;
    	}
    
    #column .holder h2.title img{
    	float:left;
    	margin:-15px 8px 0 0;
    	padding:5px;
    	border:1px solid #666666;
    	}
    
    #column .holder p.readmore{
    	display:block;
    	width:100%;
    	font-weight:bold;
    	text-align:right;
    	line-height:normal;
    	}
    
    #column div.imgholder{
    	display:block;
    	width:290px;
    	margin:0 0 10px 0;
    	padding:4px;
    	border:1px solid #666666;
    	}
    	
    /* Featured Block */
    
    #column #featured a{
    	color:#FF9900;
    	background-color:#F9F9F9;
    	}
    
    #column #featured ul, #column #featured h2, #column #featured p{
    	margin:0;
    	padding:0;
    	list-style:none;
    	}
    
    #column #featured li{
    	display:block;
    	width:250px;
    	margin:0;
    	padding:20px 25px;
    	color:#2E271D;
    	background-color:#F9F9F9;
    	}
    
    #column #featured li p{
    	line-height:1.6em;
    	}
    
    #column #featured li p.imgholder{
    	display:block;
    	width:240px;
    	height:90px;
    	margin:20px 0 15px 0;
    	padding:4px;
    	border:1px solid #666666;
    	}
    
    #column #featured li h2{
    	margin:0;
    	padding:0 0 14px 0;
    	font-size:20px;
    	font-weight:normal;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	line-height:normal;
    	}
    
    #column #featured p.more{
    	display:block;
    	width:100%;
    	margin-top:15px;
    	font-weight:bold;
    	text-align:right;
    	line-height:normal;
    	}
    
    
    .flickrbox ul{
    	margin:0;
    	padding:0;
    	list-style:none;
    	}
    	
    .flickrbox li{
    	display:block;
    	float:left;
    	width:80px;
    	height:80px;
    	margin:0 15px 15px 0;
    	padding:4px;
    	border:1px solid #666666;
    	}
    
    .flickrbox li.last{margin-right:0;}
    
    /* ----------------------------------------------Footer-------------------------------------*/
    
    #footer{
    	padding:0px 0 20px;
    	margin-top: 20px;
    	}
    
    #footer h2{
    	margin-bottom:10px;
    	border-bottom-color:#98989A;
    	}
    
    #footer p, #footer ul, #footer a{
    	margin:0;
    	padding:0;
    	font-weight:normal;
    	list-style:none;
    	line-height:normal;
    	}
    
    #footer .footbox{
    	display:block;
    	float:right;
    	width:600px;
    	margin:0 0 0 15px;
    	padding:5;
    	}
    
    #footer li{
    	margin-bottom:3px;
    	}
    
    #footer .last{
    	margin:0;
    	}
    
    #newsletter{
    	display:block;
    	float:left;
    	width:300px;
    	font-size: 14px;
    	}
    
    /* ----------------------------------------------Copyright-------------------------------------*/
    
    #copyright{
    	padding:10px 0;
    	}
    
    #copyright p{
    	margin:0;
    	padding:0;
    	}

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    your code:

    Code:
    #container{
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: inherit;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	/* [disabled]font-variant: normal; */
    	text-decoration: blink;
    	font-size: 12px;
    	padding: 0px 20px 20px;
    	text-wrap: unrestricted;
    	margin: 0 auto;
    	float: none;
    	width: 960px;
    	color: #362C20;
    	background-color: #FFF;
    	font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	height: 95%;
    	overflow: hidden;
    	position: relative;
    	top: 0px;
    	}
    this is your align problem-----> margin: 0px 0px 0px 50px;
    change to margin:0 auto;

    new code:
    Code:
    #container{
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: inherit;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	/* [disabled]font-variant: normal; */
    	text-decoration: blink;
    	font-size: 12px;
    	padding: 0px 20px 20px;
    	text-wrap: unrestricted;
    	margin: 0 auto;
    	float: none;
    	width: 960px;
    	color: #362C20;
    	background-color: #FFF;
    	font-family: Calibri, "Palatino Linotype", "Book Antiqua", "Trebuchet MS", serif;
    	height: 95%;
    	overflow: hidden;
    	position: relative;
    	top: 0px;
    	}
    shockup.com

  • Users who have thanked raptorjgzus for this post:

    fingerwurst (07-12-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


    perfect! thank you

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    No problem man your welcome!!!
    shockup.com


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •