Support » Themes and Templates » #Content and #Sidebar Won't Line Up Correctly

  • Hi,

    My blog is located at

    The theme I am working with used to have an h2 heading that said “Latest Posts” in between the logo and the title of the first post. I removed the heading in index.php, so now I have this:

    <?php get_header(); ?>
    <?php /* this is to deal with author pages */
    if(isset($_GET['author_name'])) :
    $curauth = get_userdatabylogin($author_name); // NOTE: 2.0 bug requires get_userdatabylogin(get_the_author_login());
    else :
    $curauth = get_userdata(intval($author));
    <div id="content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">	
    		<?php if (is_linked_list()): ?>
      <h4 class="entry-title linked-list-item"><a href="<?php the_linked_list_link(); ?>" title="<?php printf( esc_attr__( 'Link to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?> &rarr;</a></h4>
    <?php else: ?>
      <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <?php endif; ?>

    The problem is, when I removed the header, there was still a blank space where the text used to be. As a result, the content was lower than the sidebar.

    I tried to solve the problem by changing the margins of #content and #sidebar in style.css.

    /* content area */
    #content {
    	margin: 3em 0em;
    	padding: 0em;
    	width: 40em;
    	float: left;
    /* sidebar */
    #sidebar {
    	margin: 5em 0em;
    	padding: 0em;
    	width: 16em;
    	float: right;

    As you can see, I changed the margin of the content area to 3em and the margin of the sidebar to 5em. This seemed to solve the problem — the content area looked like it was aligned with the sidebar. However, I noticed today that they are actually off by a TINY amount.

    Now, I hate to make such a big deal of something so tiny, but please humor me. It’s hard to tell, but the content area is a TINY bit higher than the sidebar. Don’t judge me–minuscule things like this really bother me!!

    I tried changing the sidebar margin to 4em, but it was still a little off. I turns out that I’d have to set the margin to something like 4.595 for it to line up, which is absurd. Where are those tiny pixels coming from?

    I figure this has something to do with the fact that I removed the original heading. There is still a white blank space there that I cannot get rid of, otherwise I would not have to mess with the margins at all. Shouldn’t I be able to set the margins to 0em and everything should just line up??

    Anyway, please help!!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi.

    Could you tell us the default margins for those 2 divs?


    The #content and the #sidebar? I think they were both set to 0em.

    for some reason the title of the first post has class “linked-list-item” applied to it. this class has a margin applied somewhere that’s not in style.css.

    either you figure out how to remove the linked-list-item or put this into style.css

    .post .linked-list-item {
    margin: 0;

    after that, set the margins for both #content and #sidebar to equal value

    I tried adding that to style.css but it didn’t affect anything.

    I don’t want to remove the linked-list-item — that’s how I get the title of the post to act as a link, similar to

    I was able to change the margin using #content h4 { margin: 0em }

    but that didn’t seem to affect anything either. It still looks the same.

    i’m starting to think the problem is the header margins:

    /* header */
    #header {
    	margin: 0em;
    	border: 0px solid gray;
    	padding: 0em;
    	width: 60em;
    #header h1 {
    	margin: 0em;
    	border: 0px solid gray;
    	padding: 0em;
    	font-size: 6em;
    	line-height: 0.75em; /* weird IE7 bug fix */
    	float: left;
    	min-width: 6em;
    #header #tagline {
    	margin: 0.75em 0em 0em 2em; /* also part of the IE7 fix */
    	border: 0px solid gray;
    	border-left: 1px solid gray;
    	padding: 0.5em 0em 0.5em 2em;
    	color: gray;
    	background: inherit;
    	float: left;
    /* end header */
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘#Content and #Sidebar Won't Line Up Correctly’ is closed to new replies.