A div or float error ? Any help

Discussion in 'CSS' started by z80039, Oct 25, 2008.

  1. #1
    I was trying to make the sidebars wider on my wordpress theme.
    I wanted them to be 160 both. The problem is am not getting them to work :S
    I changed wrapper,header and footer sizes didn`t work
    making the content area smaller also didn`t work

    Any help ?
    Here is the stylesheet :
    
    /*
    Theme Name: Princess of Style
    Theme URI: http://phoneremix.com/
    Description: This is a Premium theme for WordPress, just for premium blogs!
    Version: 1.0
    Author: Liam Raiden.
    Author URI: http://phoneremix.com/
    */
    
    /*** General Format ***/
    
    * {
    	padding: 0;
    	margin: 0;
    }
    
    body {
    	background: #FFFFFF url(images/bg_blue.gif) repeat-x;
    	font-size: 14px;
    	color: #000;
    	font-family: Arial, Sans-Serif;
    }
    
    img {
    	border: 0;
    }
    
    a {
    	color: #D83B00;
    	text-decoration: none;
    	
    }
    
    a:hover {
    	color: #D83B00;
    	text-decoration: none;
    }
    
    a:visited {
    	color: #D83B00;
    }
    
    /*** Structure Format ***/
    
    #wrapper {
    	display: block;
    	margin: 0 auto;
    	width: 945px;
    	position: relative;
    	background: url(images/postbg.gif) repeat-y;
    }
    
    #header {
    	width: 945px;
    	background: #000 url(images/header.gif) repeat-x;
    	height: 125px;
    	margin-top: 0;
    	color: #fff;
    }
    
    .title {
    	padding: 28px 0 0px 17px;
    }
    
    .title h2{
    	color: #F0F5F7;
    	text-transform: none;
    	border-bottom: none;
    }
    
    #topleft {
    position: absolute;
    left: 15px;
    top: 0;
    display: block;
    height: 119px;
    width: 74px;
    background: url(images/TLbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;}
    
    #content {
    	width: 550px;
    	float: left;
    	color: #292929;
    	padding-top: 20px;
    	padding-right: 10px;
    	padding-left: 30px;
    	font-family: Arial, Sans-Serif;
    	
    }
    
    #content h1 a {
        color: #CB290A;
    	font-weight: bold;
    	padding-right: 30px;
    }
    
    #sidebarRight {
    	width: 142px;
    	float: right;
    	color: #000;
    	padding: 15px;
    	margin-right: 5px;
    }
    
    * html #sidebarRight {
    	width: 146px;
    }
    
    #sidebarLeft {
    	width: 140px;
    	float: right;
    	color: #000;
    	padding: 15px;
    	border-right: #DEDED8 1px solid;
    }
    
    * html #sidebarLeft {
    	width: 120px;
    }
    
    /*** NavBar Format ***/
    
    ul#Nav {
    	margin-top: 8px;
    	padding: 0;
    	list-style: none;
    	float: right;
    	font-family: Arial, Sans-Serif;
    	font-size: 13px;
    	font-weight: bold;
    }
    
    ul#Nav li {
    	float: left;
    }
    
    ul#Nav li.current a{
    	border-left: none;
    	background: #DFDED2 url(images/navOff.gif) repeat-x;
    	color: #1F1F1F;
    }
    
    ul#Nav a {
    	display: block;
    	float: left;
    	padding: 0 1.48em;
    	line-height: 30px;
    	background: #DFDED2 url(images/navon.gif) repeat-x;
    	margin-left: 5px;
    	text-decoration: none;
    	color: #fff;
    }
    
    ul#Nav a:hover {
    	background: #DFDED2 url(images/navOff.gif) repeat-x;
    	text-decoration: none;
    	color: #1F1F1F;
    }
    
    ul#Nav li.current_page_item a { 
    	color: #fff; 
    	background: url(images/navOff.gif) repeat-x; 
    	text-decoration: none;
    }
    
    /*** Text Format ***/
    
    .post {
    	margin-bottom: 35px;
    }
    
    blockquote {
    	color: #818181; 
    	margin: 0 30px 20px 30px; 
    	border-left: 6px solid #174D79;
    	padding: 10px 10px 4px 10px;
    	font-size: 12px;
    	font-family: Arial, Sans-Serif;
    	background: #F9FAF7;
    }
    
    p {
    	margin-bottom: 15px;
    	line-height: 1.6em;
    }
    
    p a {
    	border-bottom: 0px solid #ccc;
    	text-decoration: none;
    }
    
    p a:hover {
    	border-bottom: 0px solid #999898;
    	text-decoration: none;
    }
    
    p.center {
    	text-align: center;
    }
    
    .postmeta {
    	padding: 3px;
    	font-size: 12px;
    }
    
    .postmeta a {
    	border-bottom: none;
    }
    
    .postmeta a:hover {
    	border-bottom: none;
    }
    
    .entry_counter {
    	margin-top: -33px;
    	padding-right: 30px;
    	padding-top: 3px;
    	float: right;
    	height: 26px;
    	width: 30px;
    	font-size: 14px;
    	font-weight: bold;
    	color: #000;
    	text-align: center;
    
    }
    
    .entry_counter a{
        color: #404D58;
    	text-decoration: underline;
    }
    
    .small {
    	font-size: 10px;
    }
    
    code {
    	font-size: 12px; 
    	font-family: Arial, Sans-Serif;
    }
    
    h1 {
    	font-size: 22px;
    	text-align: left;
    	font-weight: normal;
    	margin-bottom: 8px;
    	font-family: Arial, Sans-Serif;
    	font-style: normal;
    	padding-right: 95px;
    }
    
    h1.title {
    	font-size: 30px;
    	letter-spacing: -2.5px;
    	font-weight: normal;
    	padding: 30px 10px 0px 7px;
    }
    
    h3 {
    	font-size: 16px;
    	text-align: left;
    	color: #4D4D4B;
    	border-bottom: 1px solid #E3E3DE;
    	font-weight: normal;
    	margin-bottom: 8px;
    
    	padding-left: 5px;
    	font-family: Arial, Sans-Serif;
    }
    
    
    h4 {
    	margin: -5px 250px 10px 0px;
    	padding: 0;
    	font-weight: normal;
    	font-size: 12px;
    	color: #A2A29B;
    	border-bottom: 1px solid #E3E3E0;
    }
    
    /*** Lists Format ***/
    
    html>body .post ul {
    	margin-left: 0px;
    	padding: 0 0 10px 30px;
    	list-style-image: url(images/list.png);
    	padding-left: 30px;
    } 
    
    html>body .post li {
    	margin: 7px 0 8px 10px;
    }
    
    .post ol {
    	padding: 0 0 0 35px;
    	margin: 0;
    }
    
    .post ol li {
    	margin: 0;
    	padding: 0;
    	}
    
    /*** Search Format ***/
    
    #searchform {
    	display: inline;
    	float: left;
    	padding: 5px 0 0;
    	text-align: left;
    }
    
    #searchform #s {
    	width: 80px;
    	padding: 3px;
    	margin: 0 0 5px 0;
    	background: #fff;
    	border: 1px solid #A2A295;
    	color: #6A6A6A;
    	font-size: 12px;
    	font-family: Arial, Sans-Serif;
    }
    
    #searchIcon {
        height: 24px;
    	width: 40px;
    	background: #6B9006 url(images/searchIcon.gif) repeat-x;
    	border: 2px solid #6B9006;
    	padding: 0px 2px;	
    	vertical-align: top;
    	color: #fff;
    	font-weight: bold;
    }
    
    /*** Sidebar Format ***/
    
    h2 {
    	font-size: 14px;
    	text-align: left;
    	padding:  2px;
    	text-transform: uppercase;
    	font-weight: bold;
    	color:  #1C364D;
    	border-bottom: 2px #E54300 dotted;
    	margin-bottom: 5px;
    	font-family: Arial, Sans-Serif;
    }
    
    #sidebarRight {
    	color: #4B4B4B;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarLeft {
    	color: #4B4B4B;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarLeft img{
    
         padding-left: 5px;
    }
    
    #sidebarRight a {
    	color: #52524B;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarRight a:hover {
    	background: none;
    	color:  #AA3103;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarLeft a {
    	color: #52524B;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarLeft a:hover {
    	background: none;
    	color:  #AA3103;
    	text-decoration: none;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarLeft a:visited {
    	color: #52524B;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #sidebarRight a:visited {
    	color: #52524B;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    /*** Sidebar Elements Fromat ***/
    
    .sidebarIcon ul, .sidebarIcon ol { 
    	margin: 0 0 1em 0; 
    	font-size: 12px;
    }
    
    .sidebarIcon ul { 
    	list-style-image: url(images/arrow.png);
    	list-style-position: inside;
    }
    
    .sidebarIcon li { 
    	margin: 0 0 0.2em 0; 
    }
    
    .sidebarIcon ul li ul, .sidebarIcon ul li ol, .sidebarIcon ol li ul, .sidebarIcon ol li ol { 
    	margin: 0.5em 0 0.5em 5px; 
    }
    
    .sidebar ul, .sidebar ol { 
    	margin: 0 0 1em 0; 
    	font-size: 11px;
    }
    
    .sidebar ul { 
    	list-style-type: none;
    }
    
    .sidebar li { 
    	margin: 0 0 0.6em 0; 
    }
    
    .sidebar ul li ul, .sidebar ul li ol, .sidebar ol li ul, .sidebar ol li ol { 
    	margin: 0.5em 0 0.5em 5px; 
    }
    
    /*** Footer Format ***/
    
    #footer {
    	width: 945px;
    	height: 260px;
    	background: url(images/footerbg.png) repeat-y;
    	color: #ccc;
    	margin-bottom: 0px;
    	margin-top: 5px;
    	text-align: left;
    	position: relative;
    	line-height: 17px;
    	}
    	
    #footer p {
        font-size: 10px;
    	color: #EDEDED;
    	padding: 0px;
    	list-style-type: none;
    	margin: 0px;	
    	}
    	
    #footer h2 {
    	color: #fff;
    	font-size: 12px;
    	font-family: Arial, Helvetica, Sans-Serif;
    	font-weight: bold;
    	padding: 0px 0px 2px 0px;
    	margin: 5px 0px 0px 0px;
        border-bottom: 2px dotted #D32C00;
    	text-transform: uppercase;
    	text-align: left;
    	letter-spacing: 1px;
    	}
    	
    #footer h3 {
    	color: #fff;
    	font-size: 12px;
    	font-family: Arial, Helvetica, Sans-Serif;
    	font-weight: bold;
    	padding: 0px 0px 2px 0px;
    	margin: 5px 0px 3px 0px;
    	border-bottom: 2px dotted #D32C00;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    	}
    
    #footer a {
    	color: #F0F5F7;
    	text-decoration: none;
    	}
    
    #footer a:hover {
    	color: #F0F5F7;
    	text-decoration: none;
    	}
    	
    #footer ul {
    	list-style: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	}
    
    #footer ul li {
    	display: inline;
    	padding: 0px;
    	margin: 0px;
    	}
    	
    #footer ul li a {
    	display: block;
    	color: #ccc;
    	text-decoration: none;
    	margin: 0px;
    	padding: 5px 0px 5px 0px;
    	}
    
    #footer ul li a:hover {
    	color: #FFFFFF;
    	}
    	
    #footerleft {
    	float: left;
    	width: 225px;
    	margin: 15px 20px 0px 30px;
    	padding: 0px;
    	}
    	
    #footermiddle2 {
    	float: left;
    	width: 210px;
    	margin: 15px 75px 0px 80px;
    	padding: 0px;
    	}
    	
    #footerright {
    	float: left;
    	width: 245px;
    	margin: 15px 30px 0px 0px;
    	padding: 0px;
    	}
    	
    #footer #s {
    	width: 130px;
    	padding: 3px;
    	margin: 0 0 5px 0;
    	background: #fff;
    	border: 1px solid #505050;
    	color: #9B9B9B;
    	font-size: 12px;
    	font-family: Arial, Sans-Serif;
    	font-style: italic;
    }
    
    #footer #searchIcon {
        height: 22px;
    	width: 60px;
    	background: #6B9006 url(images/searchIcon.gif) repeat-x;
    	border: 2px solid #6B9006;
    	padding: 0px 2px;	
    	vertical-align: top;
    	color: #fff;
    	font-weight: bold;
    }
    
    /*** Images Format ***/
    
    img.post {
    	padding: 5px;
    	border: 0px solid #000;
    	margin: 10px;
    	float: right;
    }
    
    img.center {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 5px;
    	border: 0px solid #000;
    }
    
    img.alignright {
    	padding: 5px;
    	border: 0px solid #000;
    	background: #fff;
    	margin: 10px;
    	display: inline;
    }
    
    img.alignleft {
    	padding: 5px;
    	display: inline;
    	border: 0px solid #000;
    }
    	
    /*** Additional Format ***/
    
    .alignright {
    	float: right;
    }
    
    .alignleft {
    	float: left
    }	
    
    .float-left  { float: left; }
    
    .float-right { float: right; }
    
    .navigation {
    	display: block;
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 60px;
    }
    
    .postspermonth {
    	margin: 5px 0 10px 0;
    	list-style: none;
    	padding-left: 25px;
    }
    	
    /*** Comments Format ***/
    
    #commentform input {
    	width: 140px;
    	padding: 2px;
    	margin: 5px 5px 1px 0px;
    	color: #484848;
    }
    
    #commentform textarea {
    	width: 535px;
    	padding: 5px;
    	margin: 2px;
    	border: 1px solid #7C7E6F;
    	font-family: Arial, Sans-Serif;
    	font-size: 12px;
    }
    
    #commentform #submit {
    	margin: 0;
    	margin-bottom: 5px;
    	float: right;
    	border: 1px solid #787966;
    	font-family: Arial, Sans-Serif;
    	color: #fff;
    	background: url(images/input.gif) repeat-x;
    }
    
    .commentlist li, #commentform input, #commentform textarea {
    	font-size: 11px;
    }
    
    .commentlist li {
    	font-weight: bold;
    }
    
    .commentlist cite, .commentlist cite a {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 1.1em;
    }
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.0em;
    	text-transform: none;
    }
    
    #commentform p {
    	font-family: Arial, Sans-Serif;
    }
    
    .commentmetadata {
    	font-weight: normal;
    	font-size: 10px;
    	font-family: Arial, Sans-Serif;
    }
    
    .alt {
    	margin: 0;
    	padding: 10px;
    }
    
    .commentlist {
    	padding: 0;
    	text-align: justify;
    }
    
    .commentlist li {
    	margin: 10px 0 3px;
    	padding: 5px 10px 3px;
    	list-style: none;
    }
    
    .commentlist p {
    	margin: 10px 5px 10px 0;
    }
    
    #commentform p {
    	margin: 5px 0;
    }
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    }
    
    .commentmetadata {
    	margin: 0;
    	display: block;
    }
    
    PHP:
    Here is the site url : http://www.edragonball.com
     
    z80039, Oct 25, 2008 IP
  2. shahilroyhere

    shahilroyhere Well-Known Member

    Messages:
    189
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    130
    #2
    It can be easily done by increasing the width of wrapper, sidebars. Thats the perfect process. But your code is somewhat busy, for which i can't see it clearly that I can tell you the exact thing to do. So if you can give me the theme, I can work it out for you.
     
    shahilroyhere, Oct 26, 2008 IP
    z80039 likes this.
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes you have to make sure everything fits inside the wrapper DIV.

    So make sure

    Right Sidebar Width + Left Sidebar Width + Content Width = Wrapper Width

    and remember width =

    specified width + any left or right padding + any left or right margin + any left or right border
     
    wd_2k6, Oct 26, 2008 IP
    z80039 likes this.
  4. z80039

    z80039 Well-Known Member

    Messages:
    517
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    130
    #4
    Thanks, I got it fixed.
    Rep added.
     
    z80039, Oct 28, 2008 IP