changing from fixed to fluid
-
I’m trying to make the middle section of my site fluid so that i’m not limited to 500px. Any help would be appreciated because I’m a css newb and I’ve just been getting no where with this:
/* Theme Name: Scratch */ 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: #666 url(images/bg_body.gif); color: #fff; } h1, h2, h3, h4, h5, h6{ font-family: Arial, Helvetica, Georgia, Sans-Serif; font-size: 16px; } a{ text-decoration: underline; color: #105cb6; } 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: 0 0 0; } #header{ margin: 0 0 10px; float: left; width: 904px; height: 210px; background: url(images/bg_header.gif) no-repeat left bottom; color: #333; } #menu ul{ margin: 0; padding: 0 0 0 10px; 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: #325b0a; } #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: #325b0a; } #menu ul li a:hover{ text-decoration: underline; } #pagetitle{ clear: both; width: 904px; height: 155px; } #pagetitle h1{ padding: 36px 28px 0; font-size: 24px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #fff; } #pagetitle h1 a{ text-decoration: none; color: #fff; } #syndication{ float: left; padding: 15px 31px 0; color: #999; } #syndication a{ color: #666; } #syndication a.feed{ padding: 0 0 0 19px; background: url(images/feed_icon.png) no-repeat 0 1px; } /*#searchbox{ float: right; padding: 10px 31px 0; } #searchbox input#s{ border: 1px solid #ddd; padding: 3px; background: #fff; } #searchbox input#searchsubmit{ height: 24px; } */ .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: 600px; } .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; } .post{ padding: 9px 16px 15px; line-height: 18px; } .post h2{ padding: 0 0 2px; font-size: 16px; font-weight: bold; line-height: 27px; text-align: center; } .post h2 a{ text-decoration: none; color: #105cb6; border-bottom: 1px solid #75abea; } .post img{ padding: 4px; border: 1px solid #ddd; background: #fff; } .post img.alignleft{ float: left; margin: 5px 10px 0 0; } .post img.alignright{ float: right; margin: 5px 0 0 10px; } .post img.wp-smiley{ padding: 0; border: 0; background: none; } .entry{} .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{ padding: 9px 0 0; } .entry h1{ font-size: 20px; line-height: 30px; } .entry h2{ line-height: 18px; } .entry h3{ font-size: 14px; } .entry h4{ font-size: 12px; } .entry h5{ font-size: 11px; } .entry h6{ font-size: 10px; } .postinfo{ font-size: 11px; color: #999; } .postinfo a{ color: #578cca; } .postdate{ color: #a12a2a; } .browse{ border-top: 1px solid #bdbdbd; padding: 15px 16px; line-height: 18px; } .sidebar, .obar{ margin: 0 0 0 5px; float: right; width: 192px; line-height: 18px; } .obar{ margin: 0 0 5px 0; float: left; } .sidebar ul, .obar ul{ margin: 0; padding: 0; list-style: none; } .sidebar ul li, .obar ul li{ margin: 5px 0 0; padding: 9px 16px 15px; background: url(images/bg_ul_li.gif) no-repeat left top; } .sidebar ul li.widget_search, .obar ul li{ padding: 15px 16px; } .sidebar ul li h2, .obar ul li h2{ font-size: 20px; font-weight: bold; line-height: 16px; color: #cc9900; } .sidebar ul ul li, .obar ul ul li{ margin: 0; padding: 0px 0 3px; background: none; } .sidebar ul ul ul, .obar ul ul ul{ padding: 3px 0 0; } .sidebar ul ul ul li, .obar ul ul ul li{ padding: 0px 0px 3px 15px; background: url(images/bg_arrow_right.gif) no-repeat 0px 8px; } .sidebar ul ul ul ul li, .obar ul ul ul li{ background: url(images/bg_arrow_right_2.gif) no-repeat 0px 8px; } /* COMMENTS TEMPLATE */ .post h3#comments, .post h3#respond{ padding: 0 0 2px 19px; line-height: 27px; background: url(images/user_comment.gif) no-repeat 0 6px; color: #e45b00; } .post h3#respond{ background: url(images/add_comment.gif) no-repeat 0 6px; color: #333; } ol.commentlist{ margin: 0 0 11px; padding:0; list-style: none; } ol.commentlist li{ padding: 13px 0; background: url(images/bg_comment_bottom.gif) no-repeat left bottom; } ol.commentlist li .commentmetadata{ font-size: 11px; color: #546477; } ol.commentlist li .commentmetadata a{ color: #546477; } form#commentform small{ font-size: 11px; }
Any suggestions would be great! thanks
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘changing from fixed to fluid’ is closed to new replies.