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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resizing width with % instead of px?

    Hi there!

    I am tweaking a WordPress template to fit a blog for a roleplaying game. The template is a three-column, fixed-width one. It looks fine on my tiny 17" monitor at work, but at home on my 22", the blog is very small and sits in the center of the page. (The content section is just 904px wide.)

    Is there a way to tweak the style.css file in order to give the columns percentage widths instead of absolute pixel widths, so that the center "content" area will resize properly according to the reader's resolution/monitor size/window size? (I'm asking if it's possible to change it from fixed-width to variable/fluid-width, basically.)

    I have some experience with CSS and I'm usually pretty good at tweaking pre-existing CSS to fit my needs, but this is something that's a bit beyond me.

    Here's a snippet of the code:

    Code:
    body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	font-family: Arial, Helvetica, Georgia, Sans-Serif;
    	font-size: 12px;
    	text-align: center;
    	vertical-align: top;
    	background: #fff url();
    	color: #fff;
    }
    
    h1, h2, h3, h4, h5, h6{
    	font-family: Arial, Helvetica, Georgia, Sans-Serif;
    	font-size: 16px;
    }
    
    a{
    	text-decoration: underline;
    	color: #08441e;
    }
    
    a:hover{ text-decoration: none; }
    
    a img{ border: 0; }
    
    abbr, acronym{ border: 0; }
    
    address, dl, p{ padding: 10px 0 0; }
    
    blockquote{
    	margin: 10px 10px 0;
    	background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
    	color: #736926;
    }
    
    blockquote p{
    	padding: 10px 10px 10px 20px;
    }
    
    blockquote blockquote{
    	margin: 10px 20px;
    	background: #fff;
    	color: #333;
    }
    
    blockquote blockquote p{ padding: 10px; }
    
    code{
    	background: #f9f9f9;
    }
    
    dt{
    	font-weight: bold;
    }
    
    dd{
    	padding: 0 0 5px 15px;
    }
    
    hr{
    	clear: both;
    	margin: 15px 0 5px;
    	width: 100%;
    	border: 0;
    	height: 1px;
    	text-align: left;
    	background: url(images/bg_comment_bottom.gif) no-repeat;
    }
    
    small{
    	font-size: 10px;
    }
    
    input, textarea{
    	font-family: Arial, Helvetica, Georgia, sans-serif;
    	font-size: 12px;
    	padding: 2px;
    }
    
    input#author, input#email, input#url, textarea#comment{
    	border: 1px solid #cbb945;
    	background-color: #fffadb;
    	padding: 3px;
    }
    
    input#author, input#email, input#url{
    	margin: 0 5px 0 0;
    }
    
    #container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
    	text-align: left;
    	vertical-align: top;
    }
    
    #container{
    	margin: 0 auto;
    	width: 904px;
    	padding: 10px 0 0;
    }
    
    #header{
    	margin: 0 0 10px;
    	float: left;
    	width: 904px;
    	height: 250px;
    	background: url(images/bg_header.gif) no-repeat left bottom;
    	color: #333;
    }
    
    #menu ul{
    	margin: 0;
    	padding: 0 0 0 175px;
    	list-style: none;
    }
    
    #menu ul li{
    	float: left;
    	margin: 0 5px 0 0;
    	font-size: 14px;
    	font-weight: bold;
    	background: url(images/bg_tab_right.gif) no-repeat right top;
    	color: #ffffff;
    }
    
    #menu ul li a{
    	display: block;
    	padding: 14px 20px 10px;
    	text-decoration: none;
    	background: url(images/bg_tab_left.gif) no-repeat left top;
    	color: #ffffff;
    }
    
    #menu ul li a:hover{
    	text-decoration: underline;
    }
    
    #pagetitle{
    	clear: both;
    	width: 904px;
    	height: 250px;
    }
    
    }
    
    #pagetitle h1 a{
    	text-decoration: none;
    	color: #fff;
    }
    
    .pagewrapper{
    	margin: 0 0 10px;
    	float: left;
    	width: 904px;
    	background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
    	color: #333;
    }
    
    .page{
    	float: left;
    	padding: 0 5px 5px;
    	background: url(images/bg_page_top.gif) no-repeat;
    }
    
    .wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
    	float: left;
    	width: 500px;
    }
    
    .narrowcolumnwrapper{
    	margin: 5px 0 0;
    	float: left;
    	width: 500px;
    	background: #fff url(images/bg_narrowcol.gif) repeat-y;
    }
    
    .narrowcolumn{
    	float: left;
    	width: 500px;
    	background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
    }
    
    .content{
    	float: left;
    	width: 500px;
    	background: url(images/bg_narrowcol_top.gif) no-repeat left top;
    }


    http://ishadowran.wordpress.com/ is the blog's URL - this is the basic template I'm using, not the edited one with my current content.

    I've tried to change the px widths to %s, but this causes my right-hand sidebar to get "pushed" to the bottom of the page.

    Any advice/tips are appreciated.

    Thank you!

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    55
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Use percentages for widths as you did but also use float:left and float:right accordingly in order to float the blocks either right or left.


  •  

    Posting Permissions

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