Structuring with html / div and css

Question :

I’m a beginner / enthusiast and I’m having trouble getting rid of the “table”, I’m having trouble making this link below without leaving a fixed pixel value.

Well,itwassolvedandthiswastheresult:

*{
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
}

/* menu superior */
.links{
    width: 100%;
    height: 50px;
    position: fixed;
    display: flex;
}

.links label{
    padding: 12px 0;
    flex-grow: 1;
    cursor: pointer;
    transition: all .4s;
    text-align: center;
    font-size: 100%;
    font-weight: Bold;
    color: #ffffff;
    background-color: rgba(000,000,000,.3);
}

.links label:hover{
    background-color: rgba(255,255,255,.3);
    color: #111111;
}
/* Botões */
.scroll{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.scroll input{
    display: none;
}

.bloc{
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

/* páginas */
#inicio{
    background-color: #ffffff;
}

#sobre{
    background-color: #1aaf0b;
}

#processo{
    background-color: #d0d702;
}

#receitas{
    background-color: #d98000;
}

#social{
    background-color: #ffffff;
}

/* rolamento e transição de páginas */
.sections{
    transition: all .4s;
}

#rd_sobre:checked ~ .sections{
    margin-top: -100vh;
}

#rd_processo:checked ~ .sections{
    margin-top: -200vh;
}

#rd_receitas:checked ~ .sections{
    margin-top: -300vh;
}

#rd_social:checked ~ .sections{
    margin-top: -400vh;
}


/* TESTES */

#content
{
    position:relative;
    height:80%;
    width:80%;

}
#esquerda
{
    height:100%;
    width:32%;
    float:left;
}
#dirsup
{
    height:25%;
    width:66%;
    float:right;
    border: 1px solid black;
    background: green;
}
#dirinf
{
    position:absolute;
    height:69%;
    width:66%;
    border: 1px solid black;
    background: yellow;
    position: absolute;
    right: 0;
    bottom: 0;
}

#centlogo{
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <!-- Menu superior -->
    <nav class="links">
        <label for="rd_inicio">ÍNICIO</label>
        <label for="rd_sobre">SOBRE</label>
        <label for="rd_processo">PROCESSO</label>
        <label for="rd_receitas">RECEITAS</label>
        <label for="rd_social">SOCIAL</label>
    </nav>
    <div class="scroll">
        <!-- Botões menu superior -->
        <input type="radio" name="grupo" id="rd_inicio" checked="true">
        <input type="radio" name="grupo" id="rd_sobre">
        <input type="radio" name="grupo" id="rd_processo">
        <input type="radio" name="grupo" id="rd_receitas">
        <input type="radio" name="grupo" id="rd_social">

        <!-- Páginas -->
        <section class="sections">
            <!-- pagina 1 inicio -->
            <section class="bloc" id="inicio">
                <div id="content">
                    <div id="esquerda"><img src="imgs/logo.png" id="centlogo"></div>
                    <div id="dirsup">Teste</div>
                    <div id="dirinf">TESTE</div>
                </div>
            </section>
            <!-- pagina 2 sobre -->
            <section class="bloc" id="sobre"></section>
            <!-- pagina 3 processo -->
            <section class="bloc" id="processo"></section>
            <!-- pagina 4 receitas -->
            <section class="bloc" id="receitas"></section>
            <!-- pagina 5 social -->
            <section class="bloc" id="social"></section>
        </section>
    </div>
</body>
</html>

Answer :

Basically you can do it this way:

<div id="content">
    <div id="esquerda"></div>
    <div id="dirsup"></div>
    <div id="dirinf"></div>
</div>
<style>
#content
{
     position:relative;
     height:100%;
     width:100%;

}
#esquerda 
{
    height:100%;
    width:32%;
    float:left;
    border: 1px solid black;
    background: green;
}
#dirsup 
{
    height:25%;
    width:66%;
    float:right;
    border: 1px solid black;
    background: green;
}
#dirinf 
{
    position:absolute;
    height:69%;
    width:66%;
    border: 1px solid black;
    background: yellow;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>

What difficulty are you finding? If not, please comment that we adjust …

Hello, you could use a grid system to structure your website, I would do something like this:

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

aside{
  background-color: #27ae60;  
  margin: 0 3.33%;
  min-height: 70%;
  width:40%;
}

aside, #secao{
  display: inline-block;
  margin-top: 40px;  
  vertical-align: top;
}

body, html{
  height: 100%;
}

header{
  background-color: #34495e;
  diplay: block;
  padding: 40px;
}

#secao{
  background-color: #27ae60;
  width: 50%;
}

#secao > h2{
  padding: 20px;
}

#secao > section{
  background-color: #f39c12;
  border-top: 40px solid #fff;
  padding: 20px;
}

<header></header>
<aside>
  <h2>Sua imagem aqui</h2>
</aside
><section id="secao">
  <h2>título da seção</h2>
  <section>
    <h3>Sub título</h3>
  </section>
</section>

Note that the aside and section # sections are inline-block and the margin is calculated not to break the structure.

Finally there are several ways to do, any questions just comment.

Question :

Answer :

Leave a Reply Cancel reply