{"id":82765,"date":"2024-11-06T09:44:43","date_gmt":"2024-11-06T06:14:43","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/layout-css-challenges-2ni8\/"},"modified":"2024-11-06T09:44:43","modified_gmt":"2024-11-06T06:14:43","slug":"layout-css-challenges-2ni8","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/layout-css-challenges-2ni8\/","title":{"rendered":"\u0637\u0631\u062d \u0628\u0646\u062f\u06cc – \u0686\u0627\u0644\u0634 \u0647\u0627\u06cc CSS – \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u062f\u0631 repo Github \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0631\u0627\u06cc\u062c \u0627\u0632 \u0637\u0631\u06cc\u0642 CSS<\/p>\n

\u0637\u0631\u062d \u0646\u0627\u0648\u0628\u0631\u06cc \u062b\u0627\u0628\u062a<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″ \/>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n http-equiv=”X-UA-Compatible” content=”ie=edge” \/>
\n Fixed Navigation
\n rel=”stylesheet” href=”styles.css” \/><\/p>\n

This is a navbar
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test
\n Test<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

nav {
\n position: fixed;
\n top: 0;
\n z-index: 1000;
\n width: 100%;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0637\u0631\u062d \u062f\u0648 \u0633\u062a\u0648\u0646\u06cc<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″ \/>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n http-equiv=”X-UA-Compatible” content=”ie=edge” \/>
\n Two Columns Layout
\n rel=”stylesheet” href=”styles.css” \/><\/p>\n

class=”table-container”>
\n class=”left”>
\n Left Side<\/p>\n

class=”right”>
\n Right Side<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

.float-container .left {
\n width: 200px;
\n float: left;
\n background-color: tomato;
\n}<\/p>\n

.float-container .right {
\n margin-left: 200px;
\n background-color: aqua;
\n}<\/p>\n

.absolute-container {
\n position: relative;
\n}<\/p>\n

.absolute-container .left {
\n width: 200px;
\n position: absolute;
\n top: 0;
\n left: 0;
\n background-color: tomato;
\n}<\/p>\n

.absolute-container .right {
\n margin-left: 200px;
\n background-color: aqua;
\n}<\/p>\n

.bfc-container .left {
\n width: 200px;
\n float: left;
\n background-color: tomato;
\n}<\/p>\n

.bfc-container .right {
\n overflow: hidden;
\n background-color: aqua;
\n}<\/p>\n

.flex-container {
\n display: flex;
\n}<\/p>\n

.flex-container .left {
\n width: 200px;
\n background-color: tomato;
\n}<\/p>\n

.flex-container .right {
\n flex: 1;
\n background-color: aqua;
\n}<\/p>\n

.grid-container {
\n display: grid;
\n grid-template-columns: 200px 1fr;
\n}<\/p>\n

.grid-container .left {
\n background-color: tomato;
\n}<\/p>\n

.grid-container .right {
\n background-color: aqua;
\n}<\/p>\n

.table-container {
\n display: table;
\n}<\/p>\n

.table-container .left {
\n display: table-cell;
\n background-color: tomato;
\n}<\/p>\n

.table-container .right {
\n display: table-cell;
\n background-color: aqua;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0637\u0631\u062d \u0633\u0647 \u0633\u062a\u0648\u0646\u06cc<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″ \/>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n http-equiv=”X-UA-Compatible” content=”ie=edge” \/>
\n Three Columns Layout
\n rel=”stylesheet” href=”styles.css” \/><\/p>\n

class=”flex-container”>
\n class=”left”>Left
\n class=”middle”>Middle
\n class=”right”>Right<\/p>\n

class=”grid-container”>
\n class=”left”>Left
\n class=”middle”>Middle
\n class=”right”>Right<\/p>\n

class=”absolute-container”>
\n class=”left”>Left
\n class=”middle”>Middle
\n class=”right”>Right<\/p>\n

class=”float-container”>
\n class=”left”>Left
\n class=”middle”>Middle
\n class=”right”>Right<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

.flex-container {
\n display: flex;
\n}<\/p>\n

.flex-container .left {
\n width: 200px;
\n background-color: tomato;
\n}<\/p>\n

.flex-container .middle {
\n flex: 1;
\n background-color: blanchedalmond;
\n}<\/p>\n

.flex-container .right {
\n width: 200px;
\n background-color: aqua;
\n}<\/p>\n

.grid-container {
\n display: grid;
\n grid-template-columns: 200px 1fr 200px;
\n}<\/p>\n

.grid-container .left {
\n background-color: tomato;
\n}<\/p>\n

.grid-container .middle {
\n background-color: blanchedalmond;
\n}<\/p>\n

.grid-container .right {
\n background-color: aqua;
\n}<\/p>\n

.absolute-container {
\n position: relative;
\n}<\/p>\n

.absolute-container .left,
\n.absolute-container .right {
\n position: absolute;
\n width: 200px;
\n top: 0;
\n}<\/p>\n

.absolute-container .left {
\n left: 0;
\n background-color: tomato;
\n}<\/p>\n

.absolute-container .right {
\n right: 0;
\n background-color: aqua;
\n}<\/p>\n

.absolute-container .middle {
\n margin-left: 200px;
\n margin-right: 200px;
\n background-color: blanchedalmond;
\n}<\/p>\n

.float-container .left {
\n width: 200px;
\n float: left;
\n background-color: tomato;
\n}<\/p>\n

.float-container .right {
\n width: 200px;
\n float: right;
\n background-color: aqua;
\n}<\/p>\n

.float-container .middle {
\n margin-left: 200px;
\n margin-right: 200px;
\n background-color: blanchedalmond;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062c\u0627\u0645 \u0645\u0642\u062f\u0633<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″ \/>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n http-equiv=”X-UA-Compatible” content=”ie=edge” \/>
\n Holy Grail
\n rel=”stylesheet” href=”styles.css” \/><\/p>\n

Header
\n class=”columns”>
\n Navigation
\n Main
\n Sidebar<\/p>\n

Footer<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

body {
\n min-height: 100vh;
\n}<\/p>\n

#root {
\n display: flex;
\n flex-direction: column;
\n min-height: 100vh;
\n}<\/p>\n

header,
\nnav,
\nmain,
\naside,
\nfooter {
\n text-align: center;
\n padding: 12px;
\n}<\/p>\n

header {
\n height: 60px;
\n background-color: tomato;
\n}<\/p>\n

.columns {
\n display: flex;
\n flex-grow: 1;
\n}<\/p>\n

nav {
\n flex-shrink: 0;
\n width: 100px;
\n background-color: coral;
\n}<\/p>\n

main {
\n flex-grow: 1;
\n background-color: moccasin;
\n}<\/p>\n

aside {
\n flex-shrink: 0;
\n width: 100px;
\n background-color: sandybrown;
\n}<\/p>\n

footer {
\n height: 100px;
\n background-color: slategray;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062c\u0639<\/p>\n

\n

\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0645\u0627\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u062f\u0631 repo Github \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n