html and css div placement

Question

I'm trying to make a website with some divs that hold images / text, the layout looks something like this:

(i cant post more than 2 links, hence the text example. the divs are centered.)

-
- -
- -
- -

When i make the browser smaller the divs should line up under each other, like this:

but with my code it will look like this:

i've tried various things but none of them resulted in the first div being perfectly alligned in both situations.

html source:

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>Sinterklaas website</title>
 </head>
 <body style="background-color:black">
     <center><div class = "secondary"></div></center>
     <center>
         <div class="main">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
         <div class="main" id="second">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
  </body>

css source:

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}



.main {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 225px;
  margin: 15px;
}

.secondary {
  background-color: red;
  position: relative;
  display: inline-block;
  left: -165px;
  width: 300px;
  height: 70px;
  margin: 0 auto;
}

.test {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 260px;
  margin: 30px;
}

.empty {
  position: relative;
  display: inline-block;
  background-color: red;
  width: 300px;
  height: 0px;
}

#first {
}

#second {
  background-image: url("arduino.jpg");
  background-size: 100% 100%;
}

#third {

}

#fourth {

}

#fifth {

}

#sixth {

}

any help would really be appreciated!

`` is deprecated, you shouldn't use it anymore. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) — cocoa, Oct 13 '15 at 16:06
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — TylerH, Oct 13 '15 at 16:09

Asons · Accepted Answer · 2015-10-13T18:31:38.237

0

I cleaned up your html code a little and took out your tables so it is easier to see the structure.

Is this how you intended it to be?

html, body {
  margin: 0;
}

body {
    background-color:black;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.wrapper {
  margin: 0 auto;
  min-width: 335px;
  max-width: 670px;
  text-align: center;
}

.main {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 225px;
  margin: 15px;
}

.top {
  height: 70px;
}

@media (min-width: 680px) {
  .left {
    text-align: left;
  }
}

<div class="wrapper left">
  <div class="main top"></div>
</div>

<div class="wrapper">
  <div class="main"></div>
  <div class="main" id="second"></div>
  <div class="main"></div>
  <div class="main"></div>
  <div class="main"></div>
</div>

edited Oct 13 '15 at 18:31

answered Oct 13 '15 at 16:32

Asons

84,923
12
110
165

this centers the first div if the page is in fullscreen mode, the first div has to be places exactly above the 2nd div in fullscreen mode, like this: http://puu.sh/kIQKD/bf200d1515.png the placement of all elements when the page is made smaller is correct though. – FrankK Oct 13 '15 at 16:52
yes, we need to know at which width it should have 2 columns and they are wrapped from top to bottom. the only changes in the layout of the snippet you provided is that the most upper div has to be located above the first collum if the page is large enough to display both collums. if the page is only big enough to display 1 collum, it should place each div under each other. if you look at the other answer and run that code, that's how the page is supposed to look when you can fit one collum in the browser – FrankK Oct 13 '15 at 17:03
@user3499284 Updated my answer. – Asons Oct 13 '15 at 18:33

AGE · Answer 2 · 2015-10-13T18:49:26.530

To answer your alignment conundrum, remove the left attribute from your secondary.

But that is only a simple fix, you have a number of element layout decisions that are working against you. I wrote a fix for you here that I think will help simplify what is happening:

Added a center-horizontally class to wrap around everything.
Made CSS code relevant and readable.
Removed redundant code in CSS.

EDIT as per OP's request (read in comments):

Changed HTML to include a div to wrap around .secondary div, which now works as a whole row.
Changed the .center-horizontally CSS to adjust to full width and small screen size.
A useful link to learn about layout using CSS, very fun and relevant. Also you can emulate your code in places like codepen, jsfiddle, many more

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: black;
}
.empty, .main, .secondary {
    position: relative;
    display: inline-block;
    width: 300px;    
    margin: 0 auto;
}
.main {
    background-color: red;
    height: 225px;
    margin: 15px;
}
.main > table {
    border: 0;
    width: 100%;
    height: 100%;
}
.secondary {
    background-color: pink;
    height: 70px;
}
.test {
    height: 260px;
    margin: 30px;
}
.empty {
    height: 0px;
}
#second {
    background-image: url("arduino.jpg");
    background-size: 100% 100%;
}
.center-horizontally {
    min-width: 330px;
    width: 100%;
    text-align: center;
}
.center-horizontally .row{
    width: 100%;
}

<div class="center-horizontally">
        <div class="row">
            <div class="secondary"></div>
        </div>
        <div class="main">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" height="180px">
                        <a href="http://www.google.nl">
                            <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" bgcolor="blue" width="220px"></td>
                    <td bgcolor="green"></td>
                </tr>
            </table>
        </div>
        <div class="main" id="second">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                <tr>
                    <td colspan="2" height="180px">
                        <a href="http://www.google.nl">
                            <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" bgcolor="blue" width="220px"></td>
                    <td bgcolor="green"></td>
                </tr>
            </table>
        </div>
        <div class="main"></div>
        <div class="main"></div>
        <div class="main"></div>
        <div class="main"></div>
    </div>

Let me know if you need any further explanation.

this places all divs under eachother, which it should only do when the page is too small to display them like this: http://puu.sh/kIQKD/bf200d1515.png — FrankK, Oct 13 '15 at 16:58
I see, the benefit of the wrapper div itself is that you can modify it to your needs, such as expanding to fit your diva or making them center, think you can work based of this? — AGE, Oct 13 '15 at 17:00
I'm not very experienced with html and css yet, are there any websites i could read to help me out with this concept? — FrankK, Oct 13 '15 at 17:15

html and css div placement

2 Answers2