How to keep the divs aligned one on top of the other?

Question

How to keep the divs aligned one on top of the other?

Navigation

#1 by (3 votes)
#2 by (1 votes)

6

- I am extremely new to the subject and do not know much, I'm going from internet searches, videos and readings, I say this in case there is any unnecessary code or rule in my doubts p>

I would like some help in this situation:

I'm training a layout for a website where I've sketched in illustrator:

WhenIstartedtomovethistoanhtmlandcssIgotproblemswithaligningallthedivsontopofeachother.

Whenonasmallscreenthedivslineup,butwhenIstretchthebrowserscreeneachonefollowsadifferentrule.

Ihadtoputtogetherthetwoimagestopost,separatedbytheredbar:

Well,thequestionis,HowdoIleavethesedivsinalignment?

InthemiddleoftheprojectIwaswonderingifthisisthebestwaytodrawthislayout.ThebrownbannersareonlyforbyanidentifierwithaniconandgeneratelinksuchasContact,About,Portfolio,thingslikethat.

Abonusquestion,Itriedtomakemy"Container" look like the sketch image, where the top is not 100% leaving the buttons above it. When I did this it all went wrong, I came around using the position rules but when I slowed the browser screen the buttons went inside the other divs, I tried to float and I did not get well, the rules did not respond at all.
/ li>

Thank you in advance!

/* Estilo das colunas */

/* CABEÇALHO */
#cabecalho {
    background-color: white;
    height: 11em;
    width: 100%;
}

#cabecalho > p {
    text-align: center;
    padding-top: 5em;
}

/* CONTAINER */
#container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* COLUNAS */
.coluna {
    margin: 4px;
    width: 19em;
    height: 33em;
    background-color: lightblue;
    border-radius: 10px;
}

/* BOTÕES */
.botao {
    width: 19em;
    border-radius: 10px;
    height: 3.4em;
    background-color: tan;
}

<!DOCTYPE HTML>
<html>
<head>
	<title>Layout Menu.</title>
	<link rel="stylesheet" href="estilo.css">
	<link rel="stylesheet" href="normalize.css">
</head>
<body>
	<header id="cabecalho">
		<P> LOGO </P>
	</header>
	<div id="container">
		<section class="botao esquerdabotao">Menu</section>
		<section class="coluna esquerdacoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
		<section class="botao centralbotao">Menu</section>
		<section class="coluna centralcoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
		<section class="botao direitabotao">Menu</section>
		<section class="coluna direitacoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
	</div>
</body>
</html>

html css div alinhamento

asked by anonymous 04.03.2017 / 00:11

2 answers

1

Understand the positioning behavior of elements, by default they will follow the same directions of writing, from left to right, and when you reach the boundary back to the beginning.

Look at the order of your elements:

#botao #coluna #botao #coluna

Should be:

#botao #botao #coluna

After that, set width to its #container so that it has 3 columns side by side ( 57em , since each column has 19em ). You will already achieve the expected result as well.

#cabecalho {
    background-color: white;
    height: 11em;
    width: 100%;
}
#cabecalho > p {
    text-align: center;
    padding-top: 5em;
}
#container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    background: red;
    width: 57em;
}
.coluna {
    width: 19em;
    height: 33em;
    background-color: lightblue;
    border-radius: 10px;
}
.botao {
    width: 19em;
    border-radius: 10px;
    height: 3.4em;
    background-color: tan;
}

<!DOCTYPE HTML>
<html>
<head>
    <title>Layout Menu.</title>
    <link rel="stylesheet" href="estilo.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <header id="cabecalho">
        <P>LOGO</P>
    </header>
    <div id="container">
        <section class="botao esquerdabotao">Menu</section>
        <section class="botao centralbotao">Menu</section>
        <section class="botao direitabotao">Menu</section>

        <section class="coluna esquerdacoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>

        <section class="coluna centralcoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>

        <section class="coluna direitacoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>
    </div>
</body>
</html>

04.03.2017 / 00:51

Dll C # in Delphi 7 Use tag section within an aside

score 3 · Accepted Answer

As the friend said above the elements are rendered in the writing order of the HTML code. I used Flexbox to solve your "problem". Flexbox is a way to create layouts that do not need to depend on HTML markup.

I used the order property (of Flexbox) in class .botão and in class .coluna . "The order property determines the order in which the items are displayed in the container." , so I set order: 1 pro menu, since you want them at the top and order: 2 for the columns to be below menu.

To learn more about Flexbox, take a look at the links below.

Flexbox

Visual guide to Flexbox

/* Estilo das colunas */

/* CABEÇALHO */
#cabecalho {
    background-color: white;
    height: 11em;
    width: 100%;
}

#cabecalho > p {
    text-align: center;
    padding-top: 5em;
}

/* CONTAINER */
#container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* COLUNAS */
.coluna {
    margin: 4px;
    width: 19em;
    height: 33em;
    background-color: lightblue;
    border-radius: 10px;
    order: 2;
}

/* BOTÕES */
.botao {
    width: 19em;
    border-radius: 10px;
    height: 3.4em;
    margin: 0 0.25em;
    background-color: tan;
    order: 1;
}

<div id="container">
		<section class="botao esquerdabotao">Menu</section>
		<section class="coluna esquerdacoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
		<section class="botao centralbotao">Menu</section>
		<section class="coluna centralcoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
		<section class="botao direitabotao">Menu</section>
		<section class="coluna direitacoluna">
			<p> Olá, aqui será feito os testes de escritas para o layout </p>
		</section>
	</div>