Colunas de mesma altura

Developer
Diéssica Gurskas
Size
2,479 Kb
Views
2,024
  1. Colunas de mesma altura Previews
  2. Colunas de mesma altura HTML Codes
  3. Colunas de mesma altura CSS Codes

How do I make an colunas de mesma altura?

Para o tópico http://forum.imasters.com.br/topic/507789-colunas-de-divs-ajustveis-com-contedo/. What is a colunas de mesma altura? How do you make a colunas de mesma altura? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.

Colunas de mesma altura Previews
IQ Test

Colunas de mesma altura - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colunas de mesma altura</title> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Método 1</h1>
<h2>Simulando coluna: basta deixar a cor de "principal" (yellow) como a mesma do sidebar (red)</h2>
<!-- método 1 -->
<div id="principal"> <div id="coluna">Coluna</div> <div id="conteudo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p> </div>
</div>
<!---------------------------------------------------------------->
<h1>Método 2</h1>
<h2>Propriedade position</h2>
<!-- método 2 -->
<div id="principal2"> <div id="principal2_dentro"> <div id="coluna2">Coluna</div> <div id="conteudo2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p> </div> </div>
</div>
<!---------------------------------------------------------------->
<h1>Método 3</h1>
<h2>Manipulando o display</h2>
<!-- método 3 -->
<div id="principal3"> <div id="coluna3">Coluna</div> <div id="conteudo3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laborum in provident incidunt iure officiis accusamus est harum fuga ex nostrum dicta unde quam veniam sint autem eos. Reiciendis natus facilis sed ab aspernatur cumque consequuntur corrupti sint obcaecati et perferendis veritatis eveniet officia autem suscipit rerum quod numquam aliquam alias sunt iure pariatur ratione placeat magnam porro repellendus quisquam neque doloribus dolor quaerat maiores assumenda tenetur voluptatem nisi modi doloremque maxime. Dolorem harum eius blanditiis culpa voluptas adipisci eos corporis magnam quas delectus sit maiores distinctio magni laborum non eum laudantium tempora et debitis quisquam quo ipsum ab porro!</p></div>
</div>
</body>
</html>

Colunas de mesma altura - Script Codes CSS Codes

/* MÉTODO 1 */
#principal {
background: #34495e; /* essa cor deve ser a mesma de #sidebar, altere para background: red e veja o efeito */
overflow: hidden;
}
#coluna {
float:left;
width:200px;
background: #3498db;
}
#conteudo {
float:left;
width:600px;
background: #2980b9;
}
/* MÉTODO 2 */
#principal2 {
float:left;
overflow: hidden;
background: #2980b9;
}
#principal2_dentro {
float:left;
background: #3498db;
position: relative;
right: 600px;
}
#coluna2 {
float: left;
width: 200px;
left: 600px;
position: relative;
}
#conteudo2 {
float: left;
width: 600px;
left: 600px;
position: relative;
}
/* MÉTODO 3 */
#principal3 { display: table; }
#coluna3 { background: #3498db; width: 200px; }
#conteudo3 { background: #2980b9; width: 600px; }
#coluna3, #conteudo3 { display: table-cell; }
/* inútil */
body { width: 800px; margin: auto; font-family: 'Allerta'; }
h1, h2 { font-weight: normal; }
Colunas de mesma altura - Script Codes
Colunas de mesma altura - Script Codes
Home Page Home
Developer Diéssica Gurskas
Username diessica
Uploaded January 10, 2023
Rating 3
Size 2,479 Kb
Views 2,024
Do you need developer help for Colunas de mesma altura?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Diéssica Gurskas (diessica) Script Codes
Name
CSS is AWESOME
Git logo with CSS
How checkbox hack works
Hover to show the text
CSS Lasers
Equal Height Columns Sass mixin
A CSS curve
Floating labels with CSS only
CSS Sine Waves
Pure CSS Waves
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!