Displaying .div or images in this order

Question

How to position something in this order. This is what I want to achieve

And this is what I have now

Could someone explain to me how do i move this upwards nicely and in order?

            <div class="middle">
            <div id="middletop">
                <img style="padding-left: 5px;padding-top:6px;" src="img/slider.png"/>
                    <a href="" class="downloadbutton" title="Pobierz grę"></a>
                    <a href="" class="signbutton" title="Zarejestruj się"></a>
                    <div class="channels">
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/>
                    </div>
            </div>
        </div>

CSS code

.middle
{
   background: url('../img/middlebg.png') no-repeat center;
   width: 1009px;
   margin-top: 370px;
   margin-left: auto;
   margin-right: auto;
   height: 1536px;
   position: relative;
}

#middletop {
   display: absolute;

}
.downloadbutton {
   background: url('../img/download.png') top no-repeat;
   width: 198px;
   height: 67px;
   display: inline-block;
}.downloadbutton:hover {
   background: url('../img/download_hover.png') top no-repeat;
}
.signbutton {
   background: url('../img/sign.png') top no-repeat;
   width: 122px;
   height: 67px;
   display: inline-block;
}
.signbutton:hover {
   background: url('../img/sign_hover.png') top no-repeat;
}

.channels {
}

Hi p0na and welcome! Have you worked through sites like w3schools or FreeCodeCamp to try and solve this on your own? By working through either of these you should be able to answer this on your own. Once you do, answering your own question here is encouraged. — Nik P, May 15 '20 at 20:44
Does this answer your question? [How to vertically align an image inside a div](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) — Raghav, May 16 '20 at 08:28

score 0 · Answer 1 · answered May 16 '20 at 01:47

Based on the example you've given us I was able to create a layout that is easy to use and (hopefully) understand.

The layout

I've used tables to create a grid. This way you won't have to think about the use of position, because every element inside the grid will be placed automatically.

<body>

    <table>
      <tr>
        <td class="container">
            <div id="slider">Slider</div>
        </td>
        <td class="container">
            <table>
                <tr>
                    <td>
                        <button id="button1">button1</button>
                    </td>
                    <td>
                        <button id="button2">button2</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something1" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something2" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something3" />
                    </td>
                </tr>
            </table>
        </td>
      </tr>
    </table>

</body>

Styling

        table {
          border-collapse: collapse;
          width: 100%;
          border: none;
        }

        td, tr {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        table,
        td, tr {
            border: none;
        }

        td {
            text-align: center;
        }

        .container {
            width: 50%;
        }

        #slider {
            width: 90%;
            height: 150px;
            border: 1px solid black;
        }

        input {
            width: 90%;
        }

score 0 · Answer 2 · answered May 16 '20 at 08:01

css code,

.middle
    {
       background: url('../img/middlebg.png') no-repeat center;
       width: 1009px;
       /*margin-top: 370px;*/
       margin-left: auto;
       margin-right: auto;
       height: 1536px;
       position: relative;
    }

    #middletop {
       display: absolute;

    }
    #middletop > img {
       float: left;
    }
    .downloadbutton {
       background: url('../img/download.png') top no-repeat;
       /*width: 198px;*/
       height: 67px;
       display: inline-block;
    }
    .downloadbutton:hover {
       background: url('../img/download_hover.png') top no-repeat;
    }
    .signbutton {
       background: url('../img/sign.png') top no-repeat;
       width: 122px;
       height: 67px;
       display: inline-block;
    }
    .signbutton:hover {
       background: url('../img/sign_hover.png') top no-repeat;
    }

    .inline-block{
        display: flex;
            flex-wrap: wrap;
    }
    .inline-block a{
        flex: 0 0 50%;;
    }

html code

<div class="middle">
<div id="middletop">
    <img style="padding-left: 5px;padding-top:6px;" src="img/slider.png"/>
    <div class="inline-block">
        <a href="" class="downloadbutton" title="Pobierz grę">btn 1</a>
        <a href="" class="signbutton" title="Zarejestruj się">btn 2</a>
    </div>
    <div class="channels">
        <div>some 1</div>
        <div>some 2</div>
        <div>some 3</div>
        <div>some 4</div>
    </div>
</div>

Displaying .div or images in this order

2 Answers2

The layout

Styling