Question

Here is my style.css for a WordPress theme based on Blankslate (I’ve changed none of the PHP. I just started the CSS).

I’ve highlighted the elements’ borders to make them visible… and all of the content is overflowing out of the body border. This is the CSS in its entirety:

/* = CSS Reset 
-------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}


/* =Highlight
highlight the basic structural elements of the site
-------------------------------------------------- */

body {border: thin solid red;}

#sidebar {border: thin solid blue;}
#content {border: thin solid green;}

/* =Structure
-------------------------------------------------- */

body {
    width: 1000px;
    float: center;
    margin: auto;
}

#sidebar {
    width: 300px;
    float: right;
}
#content {
    width: 500px;
    float: left;
}

Answer 1

Add a container with overflow:hidden around your floats (for some reason, this doesn’t seem to work directly on body as I thought it should). See demo.

And remove float:center, there’s no such float value. To center the body horizontally (or any other block having a width), your margin: auto is enough.