did you set a width for either the main content area or the sidebar? if so, try lower one’s width down a bit.
You have misplaced some divs and as a result your sidebar is now outside the main container.just place it inside the main container after the primary div , it will get right as you want.
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> » <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?
@buckylulu: As per the Forum Welcome, please post your own topic. Posting in an existing topic prevents us from being able to track issues by topic. Added to which, your problem – despite any similarity in symptoms – is likely to be completely different.
My mistake. New thread started.
@wp-21 thank you thank you. i’m hoping that is right bc it sounds resolvable, and this is making me bonkers.
do you mean in my css? i have this (code pasted below) in my child theme style.css for twenty twelve. i’m also pasting the code for index.php
— not sure where to change what you are referring to!
/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/
@import url("../twentytwelve/style.css");
@media screen and (min-width: 600px) {
.socialicons {
float: right;
margin-top: -500;
position: relative;
width: 250px;
}
}
.socialicons img {
float: right;
}
.widget-area img, img.header-image { border-radius: 0; box-shadow: none; }
#signup {
float: left;
width:200px;
height:40px;
border: black 1px solid;
}
@media screen and (min-width: 600px) {
.entry-header .entry-title {
font-size: 14px;
}
}
div#left-column {
width: 290px;
float: left;
clear: none;
}
div#right-column {
width: 290px;
float: right;
clear: none;
}
index
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<div style="margin-bottom: 20px;">
</div>
<a href="internalcompass.us/castle" target="_blank">
<?php easyrotator_display_rotator('erc_79_1374391970'); ?>
</div>
<a href="internalcompass.us/castle" target="_blank">
<img src="http://internalcompass.us/castle/wp-content/uploads/2013/07/recent-posts1.jpg" border="0" style="border:none;max-width:100%;" alt="recent posts favorite posts" />
</a>
<div id="right-column">
<?php $my_query = new WP_Query('category_name=favorites');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
</div>
<div id="left-column">
<?php $my_query = new WP_Query('category_name=Recents');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
</div>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Hello, @dequecolour you should use pastebin for such long code.
Anyhow you also need to show your header.php code to so that the complete structure can be seen.
Your structure on the browser is being rendererd as this:
<div id="main" class="wrapper">
<div id="primary" class="site-content">
</div>
<div id="secondary" class="widget-area" role="complementary">
However it should be like this to depict correctly on the browser:
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div id="secondary" class="widget-area" role="complementary">
</div>
You can post your code including the header.php structure also on the pastebin and i will have a look or if you can try for yourself i m sure you will figure it out, just case of rearranging the divs.
Cheers..:)..
And also the footer.php also.
thank you!! i hope i’m doing pastebin right. i never heard of it until today.
my header.php is
<script src=”http://pastebin.com/embed_js.php?i=xzNEqv1c”></script>
footer.php is
<script src=”http://pastebin.com/embed_js.php?i=w8JkPrNT”></script>
also if you look at the style.css file from my first post, you can see that i created divs to make the left and right columns of posts. but their width is narrow enough, that i dont think it should interfere. i am stumped
sorry those links didnt embed. not sure how to do the pastebin but hoping you can follow the source link to the code.
Hi..had a look, found out the extra div which has been bothering you…
<?php easyrotator_display_rotator('erc_79_1374391970'); ?>
There is an extra div here after this line which is making
div id="main"
to close before the sidebar.
Just remove that extra div from there and you will be fine.
Cheers..:).
thanks so much. i really really appreciate it! that worked!
