Layout cu două coloane egale stânga / dreapta

Ați dorit vreodată să obțineți rapid un layout responsive cu două coloane egale și nu ați reușit? De fapt, lucrurile sunt destul de simple. Nu vă complicați cu floaturi și un număr mare de linii de cod pentru a-l obține. Stabiliți-vă layoutul cu position: absolute, după cum urmează:

HTML

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Layout cu două jumătăți egale</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 .stanga {
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 }
 .dreapta {
 position: absolute;
 top: 0;
 right: 0;
 width: 50%;
 }
 </style>
</head>
<body>
 <div class="stanga">
 <p>Aceasta este porțiunea din stânga.</p>
 </div>
 <div class="dreapta">
 <p>Acesta este porțiunea din dreapta.</p>
 </div>
</body>
</html>

Copiați codul într-un fișier text, salvați-l cu extensia .html și deschideți-l într-un browser ca Firefox sau Chrome.

Aș adăuga în CSS și un padding stanga/dreapta pentru fiecare dintre cele două jumătăți, așa:

.stanga, .dreapta {
 padding: 0 1em;
 box-sizing: border-box;
}
Acest articol a fost adăugat în categoria CSS și etichetat cu . Bookmark permalink.