html/css - image alignment

Asked

Viewed 36 times

-2

Hi, I’m starting now with html and css and I’m running some tests. I would like help to leave the image on the right side of the browser and leave a list on the left side.

html

<!DOCTYPE html>
<html lang="pt-br">
    <meta charset="UTF-8">
    <head>
        <meta charset="UTF-8">
        <title>Plataforma Omnia</title>
        <link rel="stylesheet" href="style.css"> 
        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="omni2 - Copia.png" alt=""></h1>                               
            </div>
        </header>
        <div class=gold_bar>
        </div>
    </body>
    <main>
        <br>
        <h1>Loren Ipson</h1>
        <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>
        <img class="img-relatorios" src="relatorios.png" alt="">
    </main>
</html>

css

body {
    font-family: 'Lato', sans-serif;
}
header {
    background: #4169E1;
    padding: 2px;
}
.caixa {
    position: relative; /** posicionar o elementa na pagina com relative **/
    width: 1300px;
    margin: 0 auto; /** centralizar conteudo com margem automatica **/
}
.gold_bar {
    background: #ae841a;
    padding: 20px;
}

.img-relatorios {
    position: absolute;
    left: auto;
    
}
html css

1 answer

-3


you may be solving your problem using a new layout system in the market called CSS Grid layout, with it you can define where your item will be and still gain an advantage of having a more standardized layout without error or problems with content.

You can search on grid layout on the following links:

CSS-Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

or

W3schools: https://www.w3schools.com/css/css_grid.asp

I hope I’ve helped and good studies.

Browser other questions tagged html css

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