/* I have a grid inside another grid. The parent grid is set as follows: */
.container {
display: grid;
height: 100vh;
grid-template-columns: 2.409fr 2.409fr 1fr;
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
grid-template-areas:
"header header sidePanel"
"pageContent pageContent sidePanel"
"pageContent pageContent sidePanel"
"footer footer sidePanel";
}
/* the pageContent class contains another 2x2 grid, with three elements: */
.content {
grid-area: pageContent;
background: #d123;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"content-1 content-2"
"content-1 content-3";
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.sidePanel {
grid-area: sidePanel;
}
.content {
grid-area: pageContent;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">My Header</div>
<div class="sidePanel">My sidePanel</div>
<div class="content">
<div class="content-1">
<span class="title">Main Article</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
</div>
<div class="content-2">
Content 2
</div>
<div class="content-3">
Content 3
</div>
</div>
<div class="footer">My Footer</div>
</div>
</body>
</html>
My greatest difficulty is text placement. If I place a text on content-1 for instance, and resize the page's height, the text overlaps behind the footer, exceeds its grid, and even the container grid. Is there any way to fit the text to its "grid area" and resizing it accordingly?
Your problem is that you are setting a "fixed" height for your rows. When you say:
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
it means that once the available height is established, your grid will have a certain height and won't resize according to the text.
My suggestion would be to simply change this line. You could for example just give your header and footer a fixed height:
grid-template-rows: 100px auto auto 200px;
you simply need to add an overflow rule. I just added .content-1 { overflow-y: auto; } to your code and you will get now a scrollbar if the text is higher then the box-height.
body {
margin: 0;
}
.container {
box-sizing: border-box;
display: grid;
height: 100vh;
grid-template-columns: 2.409fr 2.409fr 1fr;
grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
grid-template-areas:
"header header sidePanel"
"pageContent pageContent sidePanel"
"pageContent pageContent sidePanel"
"footer footer sidePanel";
}
.content {
grid-area: pageContent;
background: #d123;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"content-1 content-2"
"content-1 content-3";
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.sidePanel {
grid-area: sidePanel;
}
.content {
grid-area: pageContent;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
.content-1,
.content-2,
.content-3 {
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">My Header</div>
<div class="sidePanel">My sidePanel</div>
<div class="content">
<div class="content-1">
<span class="title">Main Article</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
</div>
<div class="content-2">
Content 2
</div>
<div class="content-3">
Content 3
</div>
</div>
<div class="footer">My Footer</div>
</div>
</body>
</html>
Related
How to make blocks Outerwear, Rompers, Costumes and Dresses fixed using Grid CSS?
If one scrolls the page, these blocks should go up or down with the same proportions (fractions).
How to make it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Качественная детская одежда</title>
<style>
.wrapper{
display:grid;
/*grid-template-columns: 1fr 2fr 1 fr;*/
grid-template-columns:repeat(4, 2fr);
grid-column-gap:1.5em;
grid-row-gap:0.5em;
/*grid-gap:1em;*/
}
.wrapper > div{
background:#F0FFF0;
padding:1em;
font-family:'Bahnschrift', Light, semicondensed;
/*font-family:'Times New Roman', Times, serif;*/
}
.wrapper > div:nth-child(odd){
background:#F0FFFF;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="tel"><img src="images/WhatsApp_chatting.jpg" width="60" alt="Whats App"><font size="6" color="mediumspringgreen"> Tel number</font></div>
<div><center><strong>OUTERWEAR</strong></center></div>
<div><center><strong>ROMPERS</strong></center></div>
<div><center><strong>COSTUMES</strong></center></div>
<div><center><strong>DRESSES</strong></center></div>
<div>Комплект пуховой для девочек "Адриана"</div>
<div>Комбинезон для девочки</div>
<div>Костюм тройка для девочки: шорты, майка и блузка</div>
<div>Платье розовое в полоску</div>
</div>
</body>
</html>
Use grid-tmeplate-areas on the parent and grid-area on the children to place the layout of the sections that you want. As for having the four elements on top, make them auto using grid-termplate-rows so the row will auto adjust to that rows highest height content block.
I moved the content matching the header sections into the header sections div wrapper and also added a class for styling those header sections. This helps to keep the layout a bit more cohesive for products, placing the description of the product within the same div. Also added a main reset for padding, margin and box-sizing as well.
body * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bahnschrift', Light, semicondensed;
}
.wrapper {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto minmax(calc(100vh - 4em) max-content);
grid-column-gap: 1.5em;
grid-row-gap: .5em;
grid-template-areas:
"tel outerwear rompers costumes dresses"
"main-cont main-cont main-cont main-cont main-cont";
width: minmax(360px calc(100vw - 2rem))
height: auto;
padding: 1em;
}
.wrapper>.sect {
background: #F0FFF0;
padding: 1em;
}
.wrapper>.sect:nth-child(odd) {
background: #F0FFFF;
}
.tel {
grid-area: tel;
}
.outerwear {
grid-area: outerwear;
}
.rompers {
grid-area: rompers;
}
.costumes {
grid-area: costumes;
}
.dresses {
grid-area: dresses;
}
.main-cont {
grid-area: main-cont;
padding: 2rem;
background: #F0FFFF;
}
<body>
<div class="wrapper">
<div class="tel"><img src="images/WhatsApp_chatting.jpg" width="60" alt="Whats App">
<font size="6" color="mediumspringgreen"> Tel number</font>
</div>
<div class="outerwear sect">
<h4>OUTERWEAR</h4>
<p class="outerwear-cont">Комплект пуховой для девочек "Адриана"</p>
</div>
<div class="rompers sect">
<h4>ROMPERS</h4>
<p class="rompers-cont">Комбинезон для девочки</p>
</div>
<div class="costumes sect">
<h4>COSTUMES</h4>
<p class="costumes-cont">Костюм тройка для девочки: шорты, майка и блузка</p>
</div>
<div class="dress sect">
<h4>DRESSES</h4>
<p class="dresses-cont">Платье розовое в полоску</p>
</div>
<div class="main-cont">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</div>
</div>
</body>
How to make img full height of section as showed on attached image?
I'd like to do it from css level, because I'm trying to do it by going to the tablet screen from media query.
I was trying to do this with grid-template, but it wasn't working fine.
(Using scss)
.main-content {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-evenly;
}
.main-content:nth-child(2n) {
flex-direction: row;
.main-content>*:nth-child(1) {
width: 30%;
}
.main-content>*:nth-child(2) {
width: 60%;
}
}
.main-content>*:nth-child(1) {
width: 60%;
}
.main-content>*:nth-child(2) {
width: 30%;
}
.main-content>*:nth-child(3) {
width: 100%;
}
#media (min-width: 700px) {
.main-content {
display: flex;
}
}
<section class="main-content">
<h4>Jakie projekty można zgłaszać?</h4>
<img class="chmurka" src="images/ilustracja_misja21-06 1.svg" alt="chmurka">
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</article>
</section>
Your structure is not good at all, here is an example :
.main-content{
display:flex;
justify-content: space-between;
width: 100%;
}
.first{
width: 33%;
}
.second{
width: 66%;
}
<section class="main-content">
<div class="first">
<img class="chmurka" src="images/ilustracja_misja21-06 1.svg" alt="chmurka">
</div>
<div class="second">
<h4>Jakie projekty można zgłaszać?</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</p>
</div>
</section>
section {
display: grid;
grid-template: "i h" "i a" / min-content auto;
grid-gap: 1em;
}
img {
grid-area: i;
}
h4 {
grid-area: h;
margin: 0;
}
article {
grid-area: a;
}
<section class="main-content">
<h4>Jakie projekty można zgłaszać?</h4>
<img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG">
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</article>
</section>
I am trying to create a grid layout with 2 columns and 3 rows but I'm unsure of how to position the grid items so that they are equal in dimension in their own respected areas (so that they aren't overlapping or taking up more space than needed). I've tried changing the sizes of the columns and rows using fr's and %'s but nothing seems to be working. Any help is greatly appreciated as I am relatively new to css. Below are my html and css files.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20% 20% 25%;
grid-template-areas: "health-pic health-text" "fitness-text fitness-pic" "mind-pic mind-text";
grid-gap: 20px;
}
.health-text {
grid-area: health-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 65vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.health-text h2 {
margin-bottom: 15px;
}
.health-index {
overflow: hidden;
}
.left-pic {
grid-area: health-pic;
margin-top: 20px;
}
.right-pic {
grid-area: fitness-pic;
}
.fitness-text {
grid-area: fitness-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 53vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.fitness-text h2 {
margin-bottom: 15px;
}
.mind-pic {
grid-area: mind-pic;
margin-bottom: 300px;
}
.mind-text {
grid-area: mind-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-bottom: 145px;
margin-top: 60px;
background-color: white;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Fred Ford | Health and Nutrition</title>
</head>
<body>
<!--Navbar-->
<div class="navbar">
<div class="container flex">
<h1 id="logo">Fred Ford</h1>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Services</li>
<li>Blog</li>
</ul>
</nav>
</div>
</div>
<section class="landing">
<h2 class="big-text">"Don't limit your challenges. <br> Challenge your limits." - Jerry Dunn</h2>
<div class="landing-pic">
<img src="/img/landing-pic.jpg" alt="Woman stadning on cliff during daytime">
</div>
</section>
<section class="grid">
<div class="health-index">
<img class="left-pic" src="/img/index-health.jpg" alt="Assorted healthy foods">
</div>
<div class="health-text">
<h2>The Importance of Health</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat possimus consectetur error voluptates esse saepe quod quibusdam fuga maiores. Veniam, ea! Quod nesciunt libero, placeat atque suscipit excepturi eius blanditiis soluta sunt tempora
possimus quaerat harum dolorem, id fugiat minima inventore exercitationem dolor dignissimos. Enim laboriosam animi minus facere! Officiis facilis nobis iste itaque ipsam aperiam modi, provident consequatur pariatur laudantium fugit doloribus?
Veritatis deleniti amet nesciunt rem dolor impedit reprehenderit. Eligendi enim quos quibusdam assumenda praesentium dolore, pariatur sint cum consequatur rem non expedita quisquam ab earum cumque magnam sunt laborum necessitatibus magni ducimus
id itaque. Itaque, corrupti molestiae!</p>
</div>
<div class="fitness-index">
<img class="right-pic" src="/img/index-fitness.jpg" alt="man working out outside in white t-shirt">
</div>
<div class="fitness-text">
<h2>The Importance of Fitness</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium ipsam, ad aut, optio eos qui quaerat nobis et eum, natus delectus obcaecati! Culpa, voluptatum maiores? Repudiandae necessitatibus voluptatum facilis officia libero dolorem culpa
illum cupiditate, quis sunt dolores quibusdam nesciunt quaerat quasi! Aliquam ratione quam praesentium animi obcaecati inventore ducimus eius aperiam, beatae maxime illum delectus, blanditiis eligendi quisquam molestiae et eum quia a. Similique
magni eaque sequi quaerat? A ducimus enim delectus ea adipisci.</p>
</div>
<div class="mind">
<img class="mind-pic" src="/img/index-mind.jpg" alt="Man sitting on rock near ocean water">
</div>
<div class="mind-text">
<h2>The Power and Nature of the Mind</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, quae fuga eligendi, ipsum sequi ex molestiae quisquam iure veritatis iste ipsa nulla deserunt voluptas doloremque exercitationem voluptatibus odio ea repellendus illo natus! In ea consequatur
excepturi minus alias cum assumenda commodi voluptatum necessitatibus vitae possimus ex qui sequi delectus facilis dolores, laboriosam nemo nam facere. Eos, explicabo porro cum nulla laudantium culpa id? Ipsam ut expedita incidunt, laborum vel
nihil iure sapiente libero eius assumenda rem, animi laudantium ullam! Et, alias cupiditate culpa velit rem optio nemo tempora facilis vero sequi minus itaque, temporibus facere?.</p>
</div>
</section>
<!--Footer-->
<section>
<div class="footer">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</div>
</section>
</body>
</html>
I think you can change from
grid-template-rows: 20% 20% 25%
to
grid-template-rows: 1fr 1fr 1fr;
Using 1fr for each row and columns mean they are going to have equal size
Previously you had the rows in 20% 20% 25% to translate this to fr in units it means 4fr 4fr 5fr
The fr unit is counted as the ratio of one of the row or column to the total fr
in the case of 4fr 4fr 5fr
The first row have a ratio of 4/13, the row column also have 4/13, while the last one is different which is 5/13
This means the height of each row will be different
When you do 1fr on each row it means the ratio of each row will be 1/3 so it will be equal in size
Hope I helped you there
EDIT:
.health-index {
grid-area: health-pic; /* add this line */
overflow: hidden;
}
.fitness-index {
grid-area: fitness-pic; /* this one as well */
}
You didn't specify which grid area the images belong to so it causes the image to span larger than the provided grid as it is not part of the grid
enter image description here
So, i am trying to create my layout for big screens (min-width:768px). Yet, when I set grid-template-columns as 1fr 1fr, there is empty space in the second column for both divs.
/* about */
.about-container{
padding: 3rem;
max-width: 90vw;
margin: 2rem auto;
display: grid;
grid-row-gap: 2rem;
}
#media screen and (min-width:768px){
.about{
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.about_picture_1{
width: 100%;
display: block;
height: 100%;
border-radius: 0.25rem;
}
<div class="about-container">
<div class="about">
<div class="column_about_1">
<h2>Our Story</h2>
<p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
<div class="about_picture">
<img src="img/bravo.jpg" class="about_picture_1" alt="">
</div>
<div class="column_about_2">
<h2>Our Story</h2>
<p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
<img src="img/pizzafork.jpg" class="about_picture_1" alt="">
</div>
</div>
</div>
I think you should move the display:grid css rule in "about" class outside of media query and set the grid areas outside then for 768px and up for big screens set the grid template areas for 2 columns. Here's my sample css code that I made:
.about-container{
padding: 3rem;
max-width: 90vw;
margin: 2rem auto;
display: grid;
grid-row-gap: 2rem;
}
.about {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"col1 col1"
"col2 col2";
}
#media screen and (min-width:768px){
.about{
grid-template-areas:
"col1 col2"
"col1 col2";
}
}
.about_picture_1{
width: 100%;
display: block;
height: 100%;
border-radius: 0.25rem;
}
.column_about_1 {
grid-area: col1;
}
.column_about_2 {
grid-area: col2;
}
Here's your html structure that I updated/fixed.
<div class="about-container">
<div class="about">
<div class="column_about_1">
<h2>Our Story</h2>
<p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
<div class="about_picture">
<img src="img/bravo.jpg" class="about_picture_1" alt="">
</div>
</div>
<div class="column_about_2">
<h2>Our Story</h2>
<p class="about_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, minus. Animi adipisci perspiciatis, quae aspernatur fugiat odit incidunt officia nemo enim consequuntur quas cupiditate obcaecati hic, doloremque corrupti labore quidem?</p>
<div>
<img src="img/pizzafork.jpg" class="about_picture_1" alt="">
</div>
</div>
</div>
</div>
Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.
I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.
I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?
#site {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
#content {
width: 1024px;
height: 100%;
vertical-align: middle;
background-color: red;
}
#footer {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.item {
display: table-cell;
}
.copy {
font-size: 12pt;
font-family: Arial;
display: inline-block;
vertical-align: middle;
}
.l1nk {
display: inline-block;
vertical-align: middle;
}
.l2nk {
display: inline-block;
vertical-align: middle;
}
<div id="site">
<div id="header">
<img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
</div>
<div id="content">
<img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
</div>
<div id="footer">
<div class="copy">xoxo © xoxo </div>
<div class="l1nk">
<img src="Images/insta100.png" alt="instagram" height="25" width="25" />
</div>
<div class="l2nk">
<img src="Images/twttr100.png" alt="twitter" height="25" width="25" />
</div>
</div>
I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much
Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this
https://jsfiddle.net/kriscoulson/2fqu03b2/
this one has content in the content block
https://jsfiddle.net/kriscoulson/2fqu03b2/1/
HTML
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
position: relative;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
height: calc(100% - 240px);
overflow: auto;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
position: absolute;
bottom: 0;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
</div>
You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.
// EDIT
This is with the use of flexbox if you are trying to learn flexbox to do it
https://jsfiddle.net/kriscoulson/2fqu03b2/2/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
overflow: auto;
flex: 1;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
justify-content: flex-end;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
<div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
<div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
<div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
<div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
<div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
<div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
<div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
<div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
<div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
<div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
<div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
<div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
<div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
<div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
<div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
<div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
<div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
<div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
<div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
<div class="footer"> footer </div>
</div>
I'll go with the flex option while i was waiting for a feed back about it. ...
header,
footer {
background: tomato;
min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
display: flex;/* to dispatch children */
flex-direction: column;/* not in a row ! */
}
main {
background: turquoise;
flex: 1;/* fill up entire space */
overflow: auto;/* if space too small, let me scroll */
display: flex;/* to easy center content */
flex-direction: column;/* lets behave as block container */
}
div {
margin: auto;/* flex children will center on both axis , an easy one !*/
}
body {
max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
height: 100vh;/* window's height */
margin: 0 auto;
display: flex;
flex-direction: column;
}
main:hover div:after {
display: block;
content: 'test';
height: 200vh;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main, hover me to make me taller and scroll</div>
</main>
<footer>
<div>footer </div>
</footer>
for the display table-layout, you should start from body :
html, body {
height:100%;
margin:0;
}
body {
width:1024px;
margin:auto;
display:table;
}
header,footer,main {
display:table-row;
}
header>div,main>div,footer>div {
display:table-cell;
vertical-align:middle;
}
main {
height:100%;
background:turquoise;
}
footer,header {
height:120px;
background:tomato;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
<div>footer </div>
</footer>