Hi all,
My site is at
Carbon Racing: Ohio Based Competitive Bicycling Race Team
Right now the .content is at 70% width, float:left. The widget-container is at 320px width, float:right. Both are located in the Container, width of 90%.
I want to increase the .content width to 100% so it will resize properly and stay close to the sidebar. At the moment, when I do that, the sidebar gets pushed down. What CSS am I missing out of the .content or widget-container? Please help .. 4 hours later and I'm really frusterated!!
P.S. I am using the Hybrid theme, which is great, but behaves a little bit differently than others. I believe my problem is somewhere within the CSS, though I'd appreciate it if you someone could also glance over my page layout.
Code:
/**
* Theme Name: Hybrid News
* Theme URI: http://themehybrid.com/themes/hybrid-news
* Description: A news-style child theme of the Hybrid theme framework.
* Version: 0.1.1
* Author: Justin Tadlock
/**
* Body
************************************************/
body {
font: 12px/22px Verdana, Geneva, Tahoma, sans-serif;
background: #558116 url(http://carbonracing.org/images/bg-carbon.gif) repeat-x top center;
}
#body-container {
margin-top: 10px;
}
/**
* Container (content/primary/secondary)
************************************************/
#container {
min-width: 960px;
width: 90%;
overflow: hidden;
margin: 0 auto;
background: #000000;
padding: 20px 12px;
}
.page-template-no-widget #container, .primary-inactive.secondary-inactive #container {
background: #000000;
}
.content {
background: #fff url(http://carbonracing.org/images/bikers.jpg) no-repeat bottom right;
border: #8AC340 double thick;
padding-bottom: 180px;
overflow: hidden;
float:left;
width:70%;
}
.page-template-no-widgets .content, .primary-inactive.secondary-inactive .content {
width: 960px;
padding: 0 0 180px 0;
}
/**
* Widgets in general
************************************************/
.widget {
overflow: hidden;
margin: 0 5px 10px 5px;
padding: 4px 9px;
background: #FFF;
border: #8AC340 solid thin;
}
/**
* Primary, Secondary, and Tertiary
************************************************/
#widget-container {
float: right;
width: 320px;
}
#primary {
overflow: hidden;
float: right;
width: 320px;
}
#secondary {
overflow: hidden;
clear: right;
float: right;
width: 153px;
margin: 0 0 0 14px;
}
#tertiary {
overflow: hidden;
float: right;
width: 153px;
}
/**
* Posts
************************************************/
.post {
clear: both;
overflow: hidden;
margin-bottom: 20px;
}
.single .post, .page .post {
margin-bottom: 0;
}
.page-template-blog .post, .page-template-quick-post .post {
margin-bottom: 20px;
}
/* Post title */
.entry-title {
margin-bottom: 3px;
font: 15px/18px georgia, times, 'times new roman', serif;
font-weight: bold;
}
.page-title, .error-404-title {
margin: 0 0 20px 0;
/**
* Page Navigation
************************************************/
#navigation {
width: 90%;
min-width: 960px;
height: 28px;
margin: 0 auto;
font: normal normal bold 10px/10px Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
color: #fff;
background: #000000;
padding-left: 12px;
padding-right: 12px;
}
#page-nav {
float: left;
width: 740px;
margin: 0 auto;
height: 25px;
}
/**
* Header
************************************************/
#header-container {
width: 90%;
min-width: 960px;
overflow: hidden;
height: 100px;
background: #000000 url(http://carbonracing.org/images/carbon-header.jpg) no-repeat center center;
padding: 12px;
margin: 0 auto;
}
#header {
overflow: hidden;
height: 60px;
}
/**
* Category Navigation
************************************************/
#cat-navigation {
width: 90%;
min-width: 960px;
height: 24px;
margin: 0 auto;
font: normal normal normal 10px/10px Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
background:#000000;
padding-left: 12px;
padding-right: 12px;
}
#cat-nav {
float: left;
width: 800px;
height: 21px;
background: #000000;
}
Code:
<?php
/**
* Header Template
*
* @package Hybrid
* @subpackage Template
*/
hybrid_doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes( 'xhtml' ); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php hybrid_document_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<?php hybrid_head(); // Hybrid head hook ?>
<?php wp_head(); // WP head hook ?>
</head>
<body class="<?php hybrid_body_class(); ?>">
<?php hybrid_before_html(); // Before HTML hook ?>
<div id="body-container">
<div id="header-container">
<div id="header">
<?php hybrid_header(); // Header hook ?>
</div>
</div>
<?php hybrid_before_header(); // Before header hook ?>
<?php hybrid_after_header(); // After header hook ?>
<div id="container">
<?php hybrid_before_container(); // Before container hook ?>
<?php hybrid_content_wrapper( 'open' ); // Deprecated. Will be removed later. ?>
<?php
/**
* Page Template
*
* This template is loaded when viewing a page.
* @link http://codex.wordpress.org/Pages
*
* @package Hybrid
* @subpackage Template
*/
get_header(); ?>
<div class="hfeed content">
<?php hybrid_before_content(); // Before content hook ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">
<?php hybrid_before_entry(); // Before entry hook ?>
<div class="entry-content entry">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<p class="pages">' . __('Pages:', 'hybrid'), 'after' => '</p>' ) ); ?>
</div>
<?php hybrid_after_entry(); // After entry hook ?>
</div>
<?php endwhile; ?>
<?php hybrid_after_page(); // After page hook ?>
<?php comments_template( '', true ); ?>
<?php else: ?>
<p class="no-data"><?php _e('Sorry, no page matched your criteria.', 'hybrid'); ?></p>
<?php endif; ?>
<?php hybrid_after_content(); // After content hook ?>
</div>
<?php get_footer(); ?>
<?php
/**
* Footer Template
*
* @package Hybrid
* @subpackage Template
*/
?>
<?php hybrid_content_wrapper( 'close' ); // Deprecated. Will be removed later. ?>
<?php hybrid_after_container(); // After container hook ?>
</div>
<div id="footer-container">
<?php hybrid_before_footer(); // Before footer hook ?>
<div id="footer">
<h4 style="text-align:center;color:#fff;">Contact Carbon Racing: CarbonRacing09@Gmail.com. Thanks!</h3>
<?php hybrid_footer(); // Hybrid footer hook ?>
</div>
<?php hybrid_after_footer(); // After footer hook ?>
</div>
</div>
<?php wp_footer(); // WordPress footer hook ?>
<?php hybrid_after_html(); // After HTML hook ?>
</body>
</html>
04-22-2009, 10:01 AM
Fluid Width Layout - Sidebar getting pushed down
