CODEWITHSUNDEEP
htmlcsscenter
user3340817
user3340817

Reputation: 3

Center three divs next to each other

Not very good at this just starting but I just can't center these divs can someone HELP :/ I have looked online but have not found anything that will work with it... i'm only 12 and it's all quite new to me. 

*{
    margin: 0px;
    padding: 0px;
}
#Title{
    height:75px;
    width:60%;
    margin-top:5%;
    background-color:black;
    display: table;
    margin-left: auto ;
    margin-right: auto ;
}
#Wallpaper{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#Logo{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#YoutubeBanner{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}

Upvotes: 0

Views: 1367

Answers (3)

Jhecht
Jhecht

Reputation: 4435

div.wrapper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  width: 80%;
  border: 1px solid black;
  text-align: center;
  margin: 0 auto;
}
<div class="wrapper">
  <div>Hi you</div>
  <div>Yes you</div>
  <div>Yup</div>
</div>

Would something like this work for you?

Upvotes: 0

Sush
Sush

Reputation: 317

You can also write code like this.

html

<center>
  <div>Div1</div>
  <div>Div2</div>
  <div>Div3</div>
</center>

css

div
{
  display: inline-block;
  border: 1px solid red;
}

Upvotes: 1

Christina
Christina

Reputation: 34652

Here is one way of doing this, it's responsive and fluid.

DEMO: https://jsbin.com/puhixo/1/

CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.5 sans-serif;
}
.row,
.column {
    box-sizing: border-box /*so padding and borders are included in width */
}
.row {
    word-spacing: -1em; /* fix the inline block extra space issue */
    letter-spacing: -1em; /* fix the inline block extra space issue */
    overflow: hidden;
    text-align: center;
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
}
.column {
    vertical-align: top;
    word-spacing: normal; /* reset child */
    letter-spacing: normal; /* reset child */
    display: inline-block;
    border: 1px solid red;
    width: 100%; /* the size UNDER the min-width in the media query*/
    padding: 10px;
    text-align: left; /* reset child */
}
@media (min-width:500px) { 
    .column {
        width: 33.333%;
        max-width: 250px; /* the max-width */
    }
}

HTML:

<div class="row">
   <div class="column">
      Column 1 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
   <div class="column">
      Column 2 text goes here. Text goes here for column 1.  
   </div>
   <!--/.column -->
   <div class="column">
      Column 3 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
</div>
<!--/.row -->

Upvotes: 1

Related Questions