Trying to center the divs

Question

I am trying to make a responsive website and in one of the parts of the site i have 3 div which i want to display in parallel when the user is watching it from a PC and one after each other vertically when is from a tablet or mobile phone.

I tried with "margin:auto", "text-align" and other properties but i cant figure out how to make the picture and the div above it be in the middle depending on the size of the window.

Right now, i have the code like this.

https://jsfiddle.net/ckd7afv1/

html:

<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" type="text/css" href="portfolio2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>  

</head>

<body>

  <div class="body">

      <div id="1">

          <div class="cProfile" id="1">
            <h1>Title<br><hr></h1>
            <div class="col-4" id="1">
                <h3 id="idAbout">Text</h3>
                <span id="idAboutTxt">Bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, 
                                        bla bla bla, bla bla bla, bla bla bla, bla bla bla, </span> 
            </div>

            <div class="col-4" id="1">
                <img class="imgYo" src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="ooops!">
            </div>

            <div class="col-4" id="1">
                <div class="cv">

                    <div class="google">
                      <a href="https://www.google.com/" target="_blank">
                        <table>
                            <tr>
                                <td><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></td>
                                <td></img><span>Google</span></td>
                            </tr>
                        </table>
                      </a>
                    </div>

                    <div class="dropdown">
                      <button class="dropbtn">Download</button>
                      <div class="dropdown-content" style="left:0;">
                        <a href="1" download>1</a>
                        <a href="2" download>2</a>
                      </div>
                    </div>

                </div>
            </div>
          </div>
      </div>
    </div>  
</body>

</html>

css:

/*Contenido*/

/*Responsive Grid*/
[class*="col-"] {
    float: left;
}

@media only screen and (min-width: 1200px) {
    /* PC: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;} 
}

.cProfile{
    margin: 5px 15%;
}

.cProfile h1{
    text-align:center;
    color:#5882FA;
    font-size:54px;
}

.cProfile h3{
    color:#5882FA;
    font-size:27px;
}

.imgYo{
  border-radius:50%;
  display: block;
  margin: auto;
  border: 1px solid #5882FA;
  border-radius: 4px;
  padding: 5px 5px;
  margin: 25px 10px 10px 10px;
  width:80%;
  height:80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anchor{
  display: block;
  height: 90px; 
  margin-top: -90px; 
  visibility: hidden;
}

.cv{
    padding:20%;
    margin:auto;
}

.cv span{   
    height:50px;
    text-align:center;
    letter-spacing: 0px;
}

.google a{
  text-decoration: none;
  font-variant: small-caps;
  font-style: bold;
  letter-spacing: -1px;
  font-size: 30px;
  margin:auto;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

.google img{
    width:50px;
    height:50px;
}

/* Dropdown Button */
.dropbtn {
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    padding:20px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    height:200px;
    padding-top:30px;
    margin:auto;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #5882FA;
}

At then end, i want something like this:

this

PC on the left, Tablet and mobile on the right.

Thank you in advance!

Joel Hernandez · Accepted Answer · 2016-08-23T16:51:49.747

2

Javi, Bootstrap it's the way to go:

Code: Bootstrap Example

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>SECTION 1</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>SECTION 2</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>SECTION 3</p>
    </div>
  </div>
</div>

</body>
</html>

Explanation:

The magic comes when you use the classes "col-sm-4" for the divs. Responsive layouts are really amazing with Bootstrap.

edited Aug 23 '16 at 16:51

answered Aug 23 '16 at 16:45

Joel Hernandez

2,195
1
13
17

2

Although I agree about using Bootstrap or any grid system out there, it's vitally important to make sure the developer understands the underlying principles of responsive development. So I encourage him to write his own grid system to gain that fundamental understanding – hellojebus Aug 23 '16 at 16:47
1

hellojebus, I agree with you, that's the reason i gave him the main idea. – Joel Hernandez Aug 23 '16 at 16:49
Actually, i heard about bootstrap but i didn't read about it. I will follow your advice and i will take a look to it. Anyway, besides the problem with the margins in the image, i cant understand why the last div with the dropdown does not center itself when i reduce the window. Could you explain it to me? as Joel said, is important to understand how this works. The problem has to be in the div "cv" because the elements inside it are in the center, but the position relative to the image is not. – Javi Aug 23 '16 at 17:43

score 1 · Answer 2 · edited May 23 '17 at 12:33

Bootstrap would be the best and easiest option here, but if you are looking to understand the magic behind the CSS well here's what you'll need:

@media (min-width: 760px) {
  .container {
    width: 700px;
  }
  .col-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%
  }
}
@media (min-width: 980px) {
  .container {
    width: 930px;
  }
  .col-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%
  }
}
@media (min-width: 1224px) {
  .container {
    width: 1100px;
  }
}

.container-responsive {
  margin-right: auto;
  margin-left: auto;
}

/*for PC */
.col-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 33.333%;
  float: left;
}

/*for tablet and phone */
.col-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

<body>
  <div id="" class="container container-responsive">
    <h1>Title<br><hr></h1>
    <section id="1" class="cProfile col-4">
      <h3 class="about">Text</h3>
      <p class="aboutTxt">Bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla,</p>
     </section>
     <div id="1" class="col-4">
        <img class="imgYo" src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="ooops!">
     </div>
     <div class="col-4 cv google" id="1">
       <a href="https://www.google.com/" target="_blank"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></img>Google</a>
     </div>
     <div class="col-4 dropdown">
       <button class="dropbtn">Download</button>
       <span class="dropdown-content">
         <a href="1" download>1</a>
         <a href="2" download>2</a>
       </span>
     </div>
  </div>
</body>

You'll have to set 3 media queries and define the styles that will be executed when the browser is resized or viewing from a phone or tablet. for the mobile and tablet versions the width of the column would be 100% (no-brainer), but when approaching your PC .col-4 you'll have to divide 100 by the number of designated columns(In your case, 3) giving us 33.333...%. I usually take the decimal point 3 to 4 places out, but it's up to how precise your trying to be.

Also, I must point out that semantics are very important. In your HTML, you have various semantic errors that will make it harder for you to debug or really follow your code when coming back to it at a later time. For example, you use:

<div class="body">

This isn't necessary because there is already a body tag that exists. I recommend that you read HTML5 semantic elements to better understand this. Another thing is you use a table to set the layout for a portion of the document and this is considered bad practice. Read this.

I only posted the code that addresses your question directly, but I know if there were other things wrong with my code I would appreciate someone else pointing them out to me. If you have anymore questions please don't hesitate to ask!

score 0 · Answer 3 · answered Aug 23 '16 at 16:45

Your code works, you just need a large enough screen to see it work.

I recommend targeting browsers widths 1024px and up (notice the change to the media query)

@media only screen and (min-width: 1024px) {
/* PC: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;} 
}

score 0 · Answer 4 · answered Aug 23 '16 at 16:50

0

.imgYo{
  border-radius:50%;
  display: block;
  margin: auto;
  border: 1px solid #5882FA;
  border-radius: 4px;
  padding: 5px 5px;
  margin: 25px 10px 10px 10px;
  width:80%;
  height:80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

You are overwriting the margin: auto; when you define the margins below it. I editted the css to

.imgYo{
  border-radius:50%;
  display: block;
  border: 1px solid #5882FA;
  border-radius: 4px;
  padding: 5px 5px;
  margin-top: 25px;
  margin-bottom:10px;
  margin-right: auto;
  margin-left:auto;
  width:80%;
  height:80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

and the image centered.

answered Aug 23 '16 at 16:50

Julie

119
2
3
13

What about the div under the image? the div "cv" isnt in the center just under the image as i want. I tried also "margin:auto" but is not working, and as i see, i am not overwriting the property there. – Javi Aug 23 '16 at 17:46
https://jsfiddle.net/2u9Lbnm4/ I tweaked the css some more. Looks like the problem with that text is that the div containing cv wasn't acting right. My edits in this section feel much more cludgey but it works. – Julie Aug 25 '16 at 17:54

Trying to center the divs

4 Answers4