WordPress theme: how to get sidebar to sit next to main content

2 Views

I’m having trouble finding a way to get my sidebar and main content area to be in line with each other. What can I do? I don’t think I know how to edit my content width. I’ve attempted to change the margins of the sidebar, but that only places the sidebar above my content. I want them to be right beside each other. 

/*
Theme Name: WordPress Test
Author: Linh Nguyen
Author URI: *mylink*
Version: 1.0
*/

body {
    font-family: 'Cardo', serif;
    font-size: 13px;
    color: #3d3d3d;
}

a:link,
a:visited {
    color: black;
    text-decoration: none;
}

p {
    line-height:13px;
}

h1, h2 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

h5 {
   font-size: 0;
   text-indent: -1000px; }


/* General Layout */
div.container {
    max-width: 950px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

#header {
    background: url(http://localhost:8888/wordpress/wp-content/uploads/2015/07/header-e1437695892390.jpg) 
  no-repeat top center; }
#headerimg  {
    margin-top: 0px; 
    padding-bottom: 20px;
    height: 130px; 
    width: 500px; }

#sidebar {
    float: left;
}
Post Views: 2

Related posts

2 comments

  2. You’ve got several problems:

    1. You need to float both divs to the left

    2. You can’t give them a total width of 100% because of the padding on the container div.

      .container {
  float: left;
  width: 75%;
}
.sidebar {
  float: left;
  width: 20%;
}

    3. The class ‘sidebar’ should be applied to a wrapper div, not UL:

      <div class="sidebar">
  <ul>
    ...sidebar content
  </ul>
</div>

    4. And your sidebar div can’t be nested within the class container.

      <div class="content">
  Main Content
</div>
<div class="sidebar">
  Sidebar content
</div>

Comments are closed.