CODEWITHSUNDEEP
csshtml
exerbar
exerbar

Reputation: 29

HTML5/CSS - Centering a Section within a Div

I'm trying to center my sections within the 'content' div but can't seem to find a way to do so. I also like to know why the 'content' div has no height even though there are elements within them. Basically I want the three column section boxes to be in the center. Any help will be much appreciated, thanks.

http://jsfiddle.net/VE72c/

    body {
    margin:0px;
    padding:0px;
}

#container {
    background-color:Silver;
    width:1024px;
    margin:auto;
    padding-left:10px;
    padding-right:10px; 
    padding-bottom:20px;
    min-height:100%;
    position:absolute;
    left:0;
    right:0;
}

#content {
    font-family:Arial, Helvetica, sans-serif;
    color:#664E44;
    background-color:red;
}

section {
    color:#24292E;
    width:300px;
    height:500px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#A8B1B1;
    padding:4px;
}

Upvotes: 0

Views: 58

Answers (2)

Adam Fratino
Adam Fratino

Reputation: 1241

Add these, and remove float: left from your section CSS.

#content {
    overflow: auto;
    text-align: center;
    margin: 0 auto;
}

section {
    display: inline-block;
}

JSFIDDLE DEMO

Upvotes: 0

web-tiki
web-tiki

Reputation: 103810

You can use display:inline-block on the sections so that they expand the parents height (#content) an use text-align:center; to center them horizontaly.

See this
FIDDLE

CSS :

body {
    margin:0px;
    padding:0px;
}
#container {
    background-color:Silver;
    width:1024px;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:20px;
    min-height:100%;
    position:absolute;
    left:0;
    right:0;
}
#content {
    font-family:Arial, Helvetica, sans-serif;
    color:#664E44;
    background-color:red;
    text-align:center;

}
section {
    color:#24292E;
    width:300px;
    height:500px;
    margin-bottom:10px;
    margin-right:10px;
    background-color:#A8B1B1;
    padding:4px;
    display:inline-block;
}

Upvotes: 2

Related Questions