4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Fluid Width Layout - Sidebar getting pushed down

by StealthA00
2 replies
  • WEB DESIGN
    • |
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>
#fluid #layout #pushed #sidebar #width
  • Profile picture of the author kokopelli
    I get a "500 Internal Server Error" when trying to view your site ...
    Signature
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    {{ DiscussionBoard.errors[5260980].message }}
    • Profile picture of the author ronc0011
      If it was me I'd set everything in percents. If you have anything like a wrapper div I would set it to 100% and then set like the header dive to maybe 98 or 97% you'll probably have to play with these values, things like borders, margins etc. will all play a role in how everything works. I usually set the header to nearly 100 % and also set a min-width on it to keep the page from being able to shrink so small as to mess up everything else. If you work with percents it's easier to balance everything, percent is the same no mater what the browser size and don't forget in a liquid layout everything counts, border width on divs margins, . You might want to double check that there are no margins or padding set on the body tag If the total width of your floated divs is more than 100% it will push the last divs down to the next line
      {{ DiscussionBoard.errors[5261086].message }}

Trending Topics