Support » Themes and Templates » How to put sidebar to the left of main content area?

  • Resolved sabster

    (@sabster)


    I’m tryign to put my sidebar to the left of my content, but for some unknown reason.. this isn’t happening. It keeps putting the content BELOW the sidebar. I have been floating it and I’m checking the pixel widths, but something is just missing here and I’m not sure waht it is.

    Here’s what the overall template looks like:

    <?php
        /*
        Template Name: Page Template1
    
        */
        ?>
    
    <?php get_header('headerpage.php'); ?>
    
    <div id="container">
    
    <div id="customsidebar">
    <?php get_sidebar(); ?>
    </div>
    
    			<div id="content" role="main">
    <?php
    			/* Run the loop to output the page.
    			 * If you want to overload this in a child theme then include a file
    			 * called loop-page.php and that will be used instead.
    			 */
    			get_template_part( 'loop', 'page' );
    			?>
    
    			</div><!-- #content -->
    		</div><!-- #container -->
    
    		<?php get_footer(); ?

    and then here’s some of the css for the attriutes above:

    #container {
    width:822px;
     } 
    
    #customsidebar {
    float:left;
    width:220px;
     } 
    
    #content {
    width:580px;
    float:left;
     }

    I tried floating the content to the right, to the left. Also, the 220 + 580 = 800px and the container area is 822 pixels across so it should fit. I mean, I feel liek this is basic css/html and it should work… i’m guessing i’m missing some wordpress esque command ors omething. does anyone see something wrong with this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • this is also twentyten child theme….

    Swap the float around.

    swap the float around? okay, not sure what you are saying here exactly, can you explain that in a different way?

    in other news, i figured out where the problem was coming from. in the parent css, the #content div has the following code:

    #content {
    	margin: 0 280px 0 20px;
    }

    for some reason, it is keeping this CSS and not getting rid of it even with the additional css i had above, it’s not overriding it for some reason. it’s putting a BIG 280px margin on the left side of it, thus makign it unable to fit next to the left sidebar div.

    i tried to change the margin in my child theme to margin-left:-280px , but this didn’t work. does anyone know how i can override that specific attriute without changing the parent?

    okay FINNNALLLLY i figured it out. hope this helps someone else out there.

    to the child theme i added this:

    #content {
    margin: 0 0px 0 20px;
    }

    this basically overrode what was in the parent CSS file. if you just do margin-right:-280px; , it won’t work. not sure why the content block has 280 px right margin….. but anyway, that’s how you do it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to put sidebar to the left of main content area?’ is closed to new replies.