Positionnement CSS

Question

Essayer de jouer avec ce thème wordpress et ne pas comprendre pourquoi la barre latérale est empilée sous le bloc de contenu. Toute aide serait très appréciée. http://www.buffalostreetbooks.com/events

CSS:

body { 
    font-family: Arial, Helvetica, Verdana, Sans-serif; 
    font-size: 10pt; 
    background-color: #692022; 
    background-image:url("http://www.buffalostreetbooks.com/wp-content/themes/autumn-leaves/images/repeatflower.png"); 
} 

body,h1#blog-title { 
    margin: 0; 
    padding: 0; 
} 

a { 
    color: blue; 
} 

a:hover { 
    color: #FF8C00; 
} 

a img { 
    border: 0 none; 
} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    background-color: #F4FBF4; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
} 

#header { 
    background-image:url("http://www.buffalostreetbooks.com/wp-content/themes/autumn-leaves/images/headertime.png"); 
    width:768px; 
    height: 200px; 
} 

#inner-header { 
    padding: 125px 1em 0; 
} 

h1#blog-title { 
    font-size: 2em; 
} 

h1#blog-title a { 
    color: #800000; 
} 

.entry-title a { 
    color: #CD853F; 
} 

h1#blog-title a, .entry-title a, #footer a { 
    text-decoration: none; 
} 

h1#blog-title a:hover, .entry-title a:hover, #footer a:hover { 
    text-decoration: underline; 
} 

div.skip-link { 
    display: none; 
} 

#menu { 
    border-bottom: 1px solid #ccc; 
} 

#menu a { 
    color: #000; 
} 

#menu a:hover { 
    text-decoration: underline; 
} 

#menu li.current_page_item a, #menu li.current_page_item a:hover { 
    background-color: #DFC28B; 
    text-decoration: none; 
} 

#content { 
    padding: 1em; 
    width:600px; 
} 

.entry-title { 
    font-size: 1.5em; 
    margin: 1em 0 0 0; 
} 

abbr.published { 
    color: #666; 
    border: 0 none; 
} 

.entry-meta, .entry-date { 
    color: #666; 
} 

#comments-list .avatar { 
    float: left; 
    margin-right: 1em; 
} 

#comments-list .n { 
    font-weight: bold; 
} 

.entry-meta, .comment-meta { 
    font-style: italic; 
} 

#comments-list p { 
    clear: left; 
} 

#primary { 
    padding-left: 1em; 
    font-size: 0.9em; 
    border-left: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    background-color: #FFFACD; 
} 

#footer { 
    text-align: center; 
    font-size: 0.8em; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    margin-bottom: 1em; 
} 

#inner-footer { 
    padding: 1em 0; 
} 

.entry-meta, .entry-meta a, 
.comment-meta, .comment-meta a, 
.sidebar, .sidebar a, 
#footer, #footer a { 
    color: #666; 
} 

/* 
LAYOUT: Two-Column (Right) 
DESCRIPTION: Two-column fluid layout with one 

sidebars right of content 
*/ 
div#container { 

margin:0 0 0 0; 
width:960px; 
height:100%; 
} 

div#content { 
margin:0 0 0 0; 
} 

div.sidebar { 

overflow:hidden; 
width:280px; 
min-height:500px; 
clear:both; 
} 

div#secondary { 
clear:right; 
} 

div#footer { 
clear:both; 
width:100%; 
} 

/* Just some example content */ 
div#menu { 
height:2em; 
width:100%; 
} 

div#menu ul,div#menu ul ul { 
line-height:2em; 
list-style:none; 
margin:0; 
padding:0; 
} 

div#menu ul a { 
display:block; 
margin-right:1em; 
padding:0 0.5em; 
text-decoration:none; 
} 

div#menu ul ul ul a { 
font-style:italic; 
} 

div#menu ul li ul { 
left:-999em; 
position:absolute; 
} 

div#menu ul li:hover ul { 
left:auto; 
} 

.entry-title,.entry-meta { 
clear:both; 
} 

div#primary { 

} 

form#commentform .form-label { 
margin:1em 0 0; 
} 

form#commentform span.required { 
background:#fff; 
color:#c30; 
} 

form#commentform,form#commentform p { 
padding:0; 
} 

input#author,input#email,input#url,textarea#comme 

nt { 
padding:0.2em; 
} 

div.comments ol li { 
margin:0 0 3.5em; 
} 

textarea#comment { 
height:13em; 
margin:0 0 0.5em; 
overflow:auto; 
width:66%; 
} 

.alignright,img.alignright{ 
float:right; 
margin:1em 0 0 1em; 
} 

.alignleft,img.alignleft{ 
float:left; 
margin:1em 1em 0 0; 
} 

.aligncenter,img.aligncenter{ 
display:block; 
margin:1em auto; 
text-align:center; 
} 

div.gallery { 
clear:both; 
height:180px; 
margin:1em 0; 
width:100%; 
} 

p.wp-caption-text{ 
font-style:italic; 
} 

div.gallery dl{ 
margin:1em auto; 
overflow:hidden; 
text-align:center; 
} 

div.gallery dl.gallery-columns-1 { 
width:100%; 
} 

div.gallery dl.gallery-columns-2 { 
width:49%; 
} 

div.gallery dl.gallery-columns-3 { 
width:33%; 
} 

div.gallery dl.gallery-columns-4 { 
width:24%; 
} 

div.gallery dl.gallery-columns-5 { 
width:19%; 
} 

div#nav-above { 
margin-bottom:1em; 
} 

div#nav-below { 
margin-top:1em; 
} 

div#nav-images { 
height:150px; 
margin:1em 0; 
} 

div.navigation { 
height:1.25em; 
} 

div.navigation div.nav-next { 
float:right; 
text-align:right; 
} 

div.sidebar h3 { 
font-size:1.2em; 
} 

div.sidebar input#s { 
width:7em; 
} 

div.sidebar li { 
list-style:none; 
margin:0 0 2em; 
} 

div.sidebar li form { 
margin:0.2em 0 0; 
padding:0; 
} 

div.sidebar ul ul { 
margin:0 0 0 2em; 
} 

div.sidebar ul ul li { 
list-style:disc; 
margin:0; 
} 

div.sidebar ul ul ul { 
margin:0 0 0 0.5em; 
} 

div.sidebar ul ul ul li { 
list-style:circle; 
} 

div#menu ul li,div.gallery dl,div.navigation 

div.nav-previous { 
float:left; 
} 

input#author,input#email,input#url,div.navigation 

div { 
width:50%; 
} 

div.gallery *,div.sidebar div,div.sidebar 

h3,div.sidebar ul { 
margin:0; 
padding:0; 
} 

Answer 1

Eh bien, à l'intérieur de votre conteneur div vous pouvez échanger la position des deux divs (la barre latérale et contenu), puis faire le flotteur div sidebar: gauche.

Si vous ne souhaitez pas déplacer le contenu, vous pouvez le faire en modifiant uniquement le CSS. Faire le flotteur contenu div #: droit faire le flotteur div # barre latérale: gauche sous la règle de div.sidebar retirer le clear: both

Answer 2

Ces quelques étapes fixerez votre mise en page:

1. Retirer clear: both; de la classe .sidebar. Ce n'est pas nécessaire.
2. Ajouter float: left; aux deux #content et #primary. Cela permettra aux deux éléments d'apparaître côte à côte.
3. Ajouter overflow: hidden; à #container. Cela forcera #container à prendre toute la hauteur de ses éléments enfants (un effet secondaire de flottement).