I want to make a layout(like facebook) with following features:
Fixed/sticky header and No footer
3 div, where div1:div2:div3 = 1:2:1
3 scroll-bar to control each div...
Scroll-1 and scroll-3 will be inside of div-1 and div-3 to control respective content, scroll-bar-2 will be in most right of the main body which will control content of div-2
Full fixed page , no extra scroll-bar , check adding lorem1000 in each div
Please help me to make this layout... Thanking you in advance
html code that i have written
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title>test</title>
</head>
<body>
<nav>
<h1>This is nav</h1>
</nav>
<div class="row">
<div class="col-3">lorem1000</div>
<div class="col-5">lorem1000</div>
<div class="col-3">lorem1000</div>
</div>
</body>
</html>
Please help me to make this layout... Thanking you in advance
I see your photo about your idea, and I review your html
use css grid
using css grid you write the code only in parent element :)
in this example .row that have 3 childs inside it
so now I use your name classes you write before (.col-3, .col-5)
and dividing the width into equal parts (fr), I put that the sidebars that kill 3 fractions of the screen, while the mainDiv kills 5 fractions ... so mainDiv is bigger than the SideBars.
it responsive, you can change the values of fr as you like (remember that the first value must be the same as the final one, and the middle value must be bigger than the sidebars)
display: grid;
grid-template-columns: 3fr 5fr 3fr;
body {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
gap: 0.5rem;
}
.row {
gap: 0.5rem;
display: grid;
grid-template-columns: 3fr 5fr 3fr;
}
nav,
.row>div {
border-radius: 0.3em;
border: 1px solid rgb(0, 51, 255);
}
.col-3 {
overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1>This is nav</h1>
</nav>
<div class="row">
<div class="col-3">sideBar</div>
<div class="col-5">mainContent</div>
<div class="col-3">sideBar</div>
</div>
</body>
</html>
Related
I am trying to understand the basics of the CSS grid system. I have an image I want to place in the upper left corner. When I place it in the top left corner, for some reason it adds extra space at the top and the left. As well, when I adjust the gap in the CSS, nothing changes, unless I change it to something extremely large (like 300px).
Here is the code I have so far. I tried adjusting the gap, removing the gap, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="gridgallerycss.css">
</head>
<body>
<div class="gallery">
<figure class="gallery__item gallery__item--1">
<img src="Emma_Allerd_Images/emmapic1.jpg" class="gallery__img" alt="Image 1">
</figure>
</div>
</body>
</html>
CSS
.gallery{
display: grid;;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
gap: 15px;
}
.gallery__img{
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery__item--1{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 6;
}
You just need to change the original margin set by the tag figure in your html. For example, add in your css:
figure{
margin: 0px;
}
You can also remove the gap:15 px, it is not necessary.
I want to grow the div with the text of "Five" to cover the area below "Two and Three" in this grid. However, I'm not sure what to do beyond making the div having the property of "Flex:1". If you run the snippet below, you can see that "Five" is below only "Two".
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 80%;
margin: auto;
}
.Five{
flex: 1;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="One">One</div>
<div class="Two">Two</div>
<div class="Three">Three</div>
<div class="Four">Four</div>
<div class="Five">Five</div>
</div>
</body>
</html>
Add grid-column: 2 / 4 to .Five which will make that element span the 2nd and 3rd columns.
I'm wondering if there's a better way to evenly space the three divs within a parent div (horizontally) using flex. Here's what I have:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
width: 33.3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
As you can see, I set each child-div / column to width: 33.3% - is there a CSS property that will automatically force them to span 100% width of their parent, collectively, without using percentages?
If I get rid of width: 33%, I get this:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I also tried setting the parent div to justify-content: space-between;, but this is now forcing the content of the inner divs to get aligned to the left (for the left div) or to the right (for the right div):
.container {
display: flex;
justify-content: space-between;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I know that setting each child div to width: 33% works, but is there a better way? Without having to calculate percentages if I wanted 7 columns, for example?
You're almost there, just try with justify-content: space-around;
As a plus, I'd recommend you have a look at this guide for a lot of interesting flexbox explanations :)
.container {
display: flex;
justify-content: space-around;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
flex-grow might be what you need here .
The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
flex-grow:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I'm trying to create a responsive layout where header and footer take around 5% of screen and are fixed. The mid section scrolls depending on number of elements in it. Even though I only mention fr and % values, the element sizes stay static irrespective of screen size changes. In firefox responsive mode (galaxy s9), I see vertical and horizontal scroll bars outside of the container class. Could someone point out what I might be doing wrong ?
<html>
<head>
<meta charset="UTF-8">
<style>
.main{
display:grid;
grid-template-rows: 2fr 20fr 2fr;
gap: 2px;
}
.header{
background-color: lightblue
}
.container{
display: grid;
overflow: auto;
grid-auto-flow: row;
grid-auto-rows: 25%;
gap: 2px;
}
.tapbar{
background-color: pink
}
.content{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class='main'>
<div class='header'>header here</div>
<div class='container'>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class='tapbar'>tap bar here</div>
</div>
</body>
Edit: Besides the selected answer, other mistake I was doing was not having html cover the entire area. Adding this to the style fixed it
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
you just have to add the following meta tags in the head tag of your html page
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to help a friend with this site. Specifically he wants the two images below the large image at the start of the page to align with the edge of the page, so that the edge of the right image aligns with the edge of the image above it.
I created the following mini demo. In it I have a flex container around the anchors with flex-basis set to 490px. However the images are not staying inside the anchor elements, nor the main column container with width: 1000px. We would like the images to be 490px wide, and the left image should align with the left edge and the right image should align with the right edge.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Thoughts?
You were close, you just need to add a max-width of 100% to the images to stop them overflowing the container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
.kickers img {
max-width: 100%;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>