Center a div - beginner

+2 Matthieu Burot · August 3, 2014
<strong>Hey there!</strong>

I'd like to center a div class but it won't work.

This is what i did:

<em> I have a background-image inside one container and then I have different container above it, so i created another conainer arround the rest(content_container). This container is supposed to be centered on that image container.</em>

Any ideas how this is going to work ?

I
"
 <style type="text/css">
        body{
            width: auto;
            height: auto;
            color: white;
            margin: 0px;

        }
        .bg_container{
            background-color: grey;
            background-image: url(wooden_background.jpg);
            width: 100%;
            padding: 20px;
            height: 1000px;

        }

        .content_container{
            top: 50%;


        }

        .header{
            background-color: teal;
            width: 600px;
            height: 150px;
        }

        .content_left{
            background-color: blue;
            width: 200px;
            height: 750px;
            float: left;
        }

        .content_right{
            background-color: red;
            width: 600px;
            height: 750px;

        }

        .footer{
            background-color: green;
            width: 600px;
            height: 75px;
        }
      
    </style>
    <body>
        <div class="bg_container">
            <div class="content_container">
                <div class="header">Header</div>
                <div class="content_left">Content_Left</div>
                <div class="content_right">Content_Right</div>
                <div class="footer">Footer</div>
            </div>
        </div>  
    </body>"

Post a Reply

Replies

Oldest  Newest  Rating
+1 Bos Eriko Reyes · August 6, 2014
 <style type="text/css">
        body{
            width: auto;
            height: auto;
            color: white;
            margin: 0px;

        }
        .bg_container{
            background-color: grey;
            background-image: url(wooden_background.jpg);
            width: 100%;
            padding: 20px;
            height: 1000px;
            text-align:center; /* Fallback */

        }

        .content_container{
            top: 50%;
            width:980px; /* This can be anything */
            text-align:left; /* To avoid centering of the text because of its parent. */
            margin:0 auto; /* 0 is the margin above and bottom, auto divides the margin on the sides equally. */
        }

        .header{
            background-color: teal;
            width: 600px;
            height: 150px;
        }

        .content_left{
            background-color: blue;
            width: 200px;
            height: 750px;
            float: left;
        }

        .content_right{
            background-color: red;
            width: 600px;
            height: 750px;

        }

        .footer{
            background-color: green;
            width: 600px;
            height: 75px;
        }
      
    </style>
    <body>
        <div class="bg_container">
            <div class="content_container">
                <div class="header">Header</div>
                <div class="content_left">Content_Left</div>
                <div class="content_right">Content_Right</div>
                <div class="footer">Footer</div>
            </div>
        </div>  
    </body>"
  • 1

HTML / CSS / Web Design

107,065 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators