Set content position relative to the sidebar

I’m using customizer on WordPress to set different layouts, and change the sidebar’s position.
The script works like that : it sets a float to the sidebar, left or right.
But when the sidebar is set on left, it goes below the content (because content is on float:left;)

The structure is like this

Read More
<div class="home">
  <div class="content" style="float:left;">
    <?php get_template_part('loop'); ?>
  </div>

  <div class="sidebar">
    <?php get_sidebar(); ?>
  </div>
</div>

In my header

    <?php
    $sidebar_position = get_theme_mod('sidebar_position');
    ?>
    <style>
      #sidebar-primary {float:  <?php echo $sidebar_position; ?>;}
    </style>

Part of the script for sidebar’s position :

$wp_customize->add_setting('sidebar_position', array());
$wp_customize->add_control('sidebar_position', array(
  'label'      => __('Sidebar position', 'Blog'),
  'section'    => 'layout',
  'settings'   => 'sidebar_position',
  'type'       => 'radio',
  'choices'    => array(
    'left'   => 'left',
    'right'  => 'right',
  ),
));

How can I automatically change the content’s position relative to the sidebar ?
Simple CSS or do I need to add something into the script to set the opposite float position to the content ?

Related posts

1 comment

  1. If you want to set your sidebar position left to your content by css float left, the sidebar must be placed before the content. So you can check the setting like this:

    <div class="home">
        <?php if ($sidebar_position == 'left') { ?>
            <div class="sidebar">
                <?php get_sidebar(); ?>
            </div>
        <?php } ?>
    
        <div class="content" style="float:left;">
            <?php get_template_part('loop'); ?>
        </div>
    
        <?php if ($sidebar_position == 'right') { ?>
            <div class="sidebar">
                <?php get_sidebar(); ?>
            </div>
        <?php } ?>
    </div>
    

Comments are closed.