WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to put sidebar to the left of main content area? (5 posts)

  1. sabster
    Member
    Posted 1 year ago #

    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?

  2. sabster
    Member
    Posted 1 year ago #

    this is also twentyten child theme....

  3. potentweb
    Member
    Posted 1 year ago #

    Swap the float around.

  4. sabster
    Member
    Posted 1 year ago #

    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?

  5. sabster
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.