I would like to know how to leave my page with this layout

-1

I need to put this example on my html page using a table or else lists.

I would like to know how I do it because I am not getting it and what is the best shape please.

    
asked by anonymous 01.04.2016 / 15:22

2 answers

1

Using pure HTML I was able to get with this code. I hope this is what you are looking for.

JSFiddle: link

HTML:

<div id="div-left">
    <div class="image">
          Image 1
    </div>
    <div class="image">
          Image 2
    </div>
    <div class="image">
          Image 3
    </div>
</div>
<div id="div-center">
    <div class="image big">
         Image 4
    </div>
    <div class="image small">
         Image 5
    </div>
</div>
<div id="div-right">
    <div class="image">
         Image 6
    </div>
    <div class="image">
         Image 7
    </div>
    <div class="image">
         Image 8
    </div>
</div>

CSS:

.image{
    height: 100px;
    line-height: 100px;/*Somente para colocar o label no centro*/
    border: 1px solid; /*So para delimitar as div visualmente*/
    text-align: center;/*Somente para colcoar o label no centro*/
}

.big{
    height: 250px;
    line-height: 250px;/*Somente para colocar o label no centro*/
}

.small{
    height: 50px;
    line-height: 50px;/*Somente para colocar o label no centro*/
}

#div-left, #div-center, #div-right{
    float:left;
}

#div-left, #div-right{
    width: 20%;
}

#div-center{
    width: 60%;
}
    
01.04.2016 / 16:04
0

I recommend flexboxing as it will be simple and most browsers support.

Read this guide to better understand: link

Even if you do not understand a lot of English, I urge you to try and use google translate if you need to, but read with patience and revert all examples to the end. I guarantee you will not have any problems with layouts after studying flexbox.

Good studies!

    
01.04.2016 / 15:59