CODEWITHSUNDEEP
htmlcss
InzeBielderman
InzeBielderman

Reputation: 35

Inline-block div's centered

I am coding for a few years now but currently got into CSS, the problem I'm currently having is the following: I want to put 2 div's next to each other but also center them, the codes I'm currently using:

HTML:

<div class="sidebar">Placeholder</div><div class="content">Placeholder</div>

CSS:

.sidebar { 
width: 223px; 
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
margin-right: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
.content {
width: 689px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
padding: 5px;
display: inline-block;
margin: auto;
}

Who can help me with this problem? ;)

Upvotes: 1

Views: 73

Answers (5)

Matjaž
Matjaž

Reputation: 2115

Hope this will help you:

enter image description here

<html>
    <head>
        <title>
            Two columns
        </title>
        <style>
        #body{
            width: 800px;
            margin: auto;
        }
        #header{
            height: 50px;
            text-align: center;
        }
        #footer{
            height: 50px;
            text-align: center;
            clear: both;
        }
        .left{
            float: left;
            width: 49%;
            position: relative;
        }
        .right{
            float: right;
            width: 49%;
            position: relative;
        }
        div{
            border: 1px solid black;
        }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="header">
                HEADER
            </div>
            <div class="left">
                LEFT
            </div>
            <div class="right">
                RIGHT
            </div>
            <div id="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

Upvotes: 0

WAQAS AJMAL
WAQAS AJMAL

Reputation: 289

Try this code

<div class="container">
    <div class="sidebar">Placeholder</div><div class="content">Placeholder</div>
</div>



.sidebar { 
width: 223px; 
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
margin-right: 20px;
padding: 5px;
display: inline-block;
margin: auto;
    float:left;

}
.content {
width: 689px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
padding: 5px;
display: inline-block;
margin: auto;
    float:left;

}
.container{ margin:0 auto; 
            width:936px;
            }

Upvotes: 0

Jimmy Breck-McKye
Jimmy Breck-McKye

Reputation: 3064

Wrap the elements in a container, and give it text-align: center.

http://jsfiddle.net/q8tKP/ :

.container {
    text-align: center;
}

.sidebar, .content {
    display: inline-block;    
}

Upvotes: 2

Alexxander.Gor
Alexxander.Gor

Reputation: 58

Add text-align: center to the container of both elements

<div class="container">
    <div class="sidebar">Placeholder</div><div class="content">Placeholder</div>
</div>

Upvotes: 0

Ani
Ani

Reputation: 4523

Here: Fiddle : http://jsfiddle.net/3MvVK/1/

<div id="wrapper"><div class="sidebar">Placeholder</div><div class="content">Placeholder</div></div>

CSS:

 #wrapper{
   display:table;
 }

 .sidebar, .content { 
    display: table-cell;
 }

If you want text center aligned too. Add text-align:center; to .sidebar, .content

Upvotes: 0

Related Questions