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

Asked

Viewed 73 times

-1

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

I’d like to know how I do it because I’m not getting it and what’s the best way please.

Quero que fique desta forma na minha página

html css
  • 1

    Just to comment, it’s not an answer, so understand how a constructive criticism, HTML5 are new tags, but it doesn’t mean you will stop using "old" tags like <div>, need to first understand what is HTML. In Html5 you actually only have more tags and more functionalities (API) to control certain DOM functions.

2 answers

1

Using pure HTML I managed to arrive with this code. I hope this is what you are looking for.

Jsfiddle: https://jsfiddle.net/Lg55n17o/

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%;
}

0

I recommend doing it with flexbox, as it will be simple and most browsers support it.

Read this guide to better understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Even if you don’t understand much English, I ask you to make the effort and use Google Transfer if you need to, but read it with patience and recite all the examples until the end. I guarantee you will not have any kind of problem with layouts after studying flexbox.

Good studies!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.