Sidebar Positioning Issues

  • Resolved buckylulu

    (@buckylulu)


    11 years, 4 months ago

    I am having the same issue on a theme I am working on. This is the code for the page:

    <body>
<?php get_header(); ?>
  <div id="page-wrap">
    <div id="contentPage">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
			<h3><a href="<?php echo get_option('home'); ?>/">Home</a> &raquo; <b><?php the_title(); ?></b></h3>
			<hr />
			<div class="entry">
				<?php the_content(); ?>
				<?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>
			</div>
			<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
		</div>
	<?php endwhile; endif; ?>
  </div>
  <div id="rightnav" class="sidebar">
		<?php get_sidebar(); ?>
  </div>
</div>
</body>
<?php get_footer(); ?>

    And here are my css rules:

    #page-wrap {
	width: 80%;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

#contentPage {
	margin: 0 45px 30px 0;
	padding:0 45px 0 0;
	width:65%;
}

#rightnav {
	float: right;
	width: 25%;
	margin: 0;
	padding: 1em;
}

.sidebar {
	float:right;
	margin: 0;
	padding: 0;
	vertical-align: top;
	clear: right;
}

    Here is what the site currently looks like. Am I missing something?

Viewing 9 replies - 1 through 9 (of 9 total)

  • Try sorting out any markup errors. Then move onto any CSS errors.
    https://codex.www.ads-software.com/Validating_a_Website

    Thread Starter buckylulu

    (@buckylulu)

    I went ahead and did some validating, but it still isn’t positioning correctly. I am a css novice, so please any and all advice is welcomed! Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You may want to first resolve your HTML errors before CSS.
    Look at using doctypes: https://www.w3schools.com/tags/tag_doctype.asp .

    Thread Starter buckylulu

    (@buckylulu)

    I did and then the report came back with 3 errors that I haven’t been able to find in any of my code. I downloaded the newest version of wordpress, switched all doctype to fit html5; what else am I not seeing here?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You don’t have a “html” element in the right place & you have a duplicate doctype. All we can do is suggest you resolve your HTML errors.

    Thread Starter buckylulu

    (@buckylulu)

    Where would I properly place it? When validating, I feel like this is also taking the current site and picking up errors. I want to just be working with the wp theme and not anything else that is within this site. I don’t see how that could be posing an issue, though, since the wp theme isn’t pulling anything from the current (albeit HTML) site.

    All in all, is my coding correct? Thanks again!

    Just doing a View Source on your site, you have 2 DIVs with an ID of page and 2 DIVs with an ID of sidebar (although one is nested inside the other).

    As far as the sidebar positioning goes, you might try having #contentPage float:left instead of sidebar float:right. But there are other problems that need to be fixed.

    Thread Starter buckylulu

    (@buckylulu)

    thanks, @crouchingbruin, that seemed to work…but now the footer bar moved up and the content is all messed up. ugh…i’m pretty sure that once this is figured out, i’ll be a happy camper!

    Thread Starter buckylulu

    (@buckylulu)

    it appears that all i had to do was add a <div class=”clear” /> and that seemed to work! thanks for all of your help!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sidebar Positioning Issues’ is closed to new replies.