#Content and #Sidebar Won't Line Up Correctly

  • Hi,

    My blog is located at https://whatblag.com

    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));
endif;
?>

<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?

    Thanks

    Thread Starter CMartuccci

    (@cmartuccci)

    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

    Thread Starter CMartuccci

    (@cmartuccci)

    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 DaringFireball.net.

    Thread Starter CMartuccci

    (@cmartuccci)

    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.

    Thread Starter CMartuccci

    (@cmartuccci)

    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.