I'm new to css and I'm trying to create a 3-col layout. There should be a centered footer too.
The total height of the page should fill the screen which it currently does. The width seems off.
Currently the footer seems misaligned in both dimensions and positioning.
I have attached the design I'm trying to build. thankful for any pointers!
.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
.left {
background-color: gainsboro;
width: 20%;
}
.center {
background-color: white;
width: 60%;
}
.right {
background-color: gainsboro;
width: 20%;
}
.footer {
height: 20px;
margin-left: 20%;
margin-right: 20%;
text-align: center;
width: 60%;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">Bla bla bla bla bla</div>
<div class="right"></div>
</div>
<div class="footer">this is a footer!</div>
</body>
If you need the footer to be at the bottom of your center column, place it inside it. With display: flex in .center you can use margin-top: auto in the .footer to push it to the bottom.
.container {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
.left {
background-color: gainsboro;
width: 20%;
}
.center {
display: flex;
flex-direction: column;
background-color: white;
width: 60%;
}
.right {
background-color: gainsboro;
width: 20%;
}
.footer {
width: 100%;
height: 20px;
margin-top: auto;
text-align: center;
background-color: red;
}
<body>
<div class="container">
<div class="left"></div>
<div class="center">
Bla bla bla bla bla
<div class="footer">this is a footer!</div>
</div>
<div class="right"></div>
</div>
</body>
Related
The colors are intended for orientation. If you enter this code like this, there should be a big red box on the left and a blue one on the right. In the red box there is a small yellow box on the left and a purple box on the right below it. I want the purple box to be the same height as the yellow one.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
align-items: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
float: right;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>
If you add display flex or contents in your CSS for .left class your yellow and purple boxes would be in the same row.
.left{
display: contents;
}
Servus ChoosenOne! In your code you mixed something. I clean a little bit up.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left, .right {
height:30px;
}
.left {
width: 64%;
display: flex;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>
I want to have a welcome page like this:
But instead I get this:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
align-items: center;
}
#container1 {
height: 100%;
vertical-align: middle;
display: table-cell;
background-color: yellow;
display: flex;
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
float: left;
width: 100%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
float: left;
width: 100%;
}
<main id="container1" class="container my-6">
<div class="">
<div id="left" class="col-lg-6 my-3">
</div>
</div>
<div class="">
<div id="right" class="col-lg-6 my-3">
</div>
</div>
</main>
I don't know why my container doesn't fully fit the body of the page, and my left and right don't go in the middle and stretch width to each other's end.
You have a bunch of errors in your code. I commented out the CSS you don't need:
No need for float, that's what flex is for.
display: table-cell is being overwritten by display: flex
Use flex to set the properties of your left and right divs.
Remove the containing elements around those.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: #000000;
margin: 0;
height: 90%;
width: 100%;
/* NOT NEEDED: align-items: center;*/
}
#container1 {
width: 100%;
height: 100%;
vertical-align: middle;
/* NOT NEEDED: display: table-cell; */
background-color: yellow;
display: flex;
/* This is probably unneeded. align-items, aligns elements on the cross access - which in this case would be vertically aligned in the center since flex-direction by default, is row */
align-items: center;
}
#left {
height: 500px;
color: white;
background-color: blue;
font-size: 20px;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
flex: 1 1 50%;
}
#right {
height: 500px;
color: white;
background-color: red;
font-size: 20px;
flex: 1 1 50%;
/* NOT NEEDED float: left; */
/* NOT NEEDED width: 100%; */
}
<main id="container1" class="container my-6">
<div id="left" class="col-lg-6 my-3">
</div>
<div id="right" class="col-lg-6 my-3">
</div>
</main>
The problem comes mostly from the divs without classes, that shouldn't be there.
But you're also mixing floats, with flex and tables. Just stick with flex like in this example:
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100%;
display: flex;
}
.left,
.right {
width: 50%;
height: 100%;
}
.left {
background: #215f40;
}
.right {
background: #092414;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
versions of this have been asked before and these questions helped me so far as to have a flex item that grows in height. However, it grows too much :)
Please see the code pen or the code here
https://codepen.io/surf-n-code/pen/wvwrbKW
Basically I have this Code
html,
body {
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
}
.box-3 {
background-color: red;
height: 60px;
}
<body>
<header>
<div class="box box-0">Header - sticks to top</div>
</header>
<main class="full-height">
<div class="nd_container">
<div class="box box-1">content</div>
<div class="box box-2">Flex grow</div>
</div>
</main>
<footer>
<div class="box box-4">Footer - stick to bottom</div>
</footer>
</body>
I would expect the box-2 to increase in size just enough such that the footer sticks exactly to the bottom of the page. I do not want any scrolling due to the created whitespace.
Any help is much appreciated :)
I hope this is what you expecting check out my answer.
NOTE:CHECK OUT MY ANSWER IN FULL SCREEN MODE
box-2 to increase in size just enough such that the footer sticks exactly to the bottom of the page.
html,
body {
height: 100%;
margin: 0;
height: 100vh;
display: flex;
flex-flow: column;
}
.nd_container {
height: 100%;
min-height: 100%;
display: flex;
flex-flow: column;
}
.nd_container .box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
justify-content: center;
}
.nd_container .box-1 {
background-color: green;
flex: 0 1 60px;
}
.nd_container .box-2 {
background-color: red;
flex: 1 1 auto;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box.box-0 {
background-color: #03a9f4;
height: 100%;
}
.box.box-4 {
background-color: #0c5460;
height: 100%;
}
header {
flex: 0 1 155px;
}
main {
flex: 1 1 auto;
}
footer {
flex: 0 1 155px;
}
<body>
<header>
<div class="box box-0">Header - sticks to top</div>
</header>
<main class="full-height">
<div class="nd_container">
<div class="box box-1">content</div>
<div class="box box-2">Flex grow</div>
</div>
</main>
<footer>
<div class="box box-4">Footer - stick to bottom</div>
</footer>
</body>
I am using a flexbox to vertically align a div, with variable height, in its container (I'm open to other options).
But I struggle to get a reliable scroll behavior when the container is smaller than the content.
html,
body,
.app {
height: 100%;
}
.app {
background-color: blue;
color: white;
}
.app header {
height: 80px;
background-color: red;
}
.app .container {
display: flex;
flex-direction: column;
background-color: black;
height: calc(100% - 80px);
align-items: center;
justify-content: center;
overflow: scroll;
}
.app .container .content {
width: 300px;
height: 200px;
background-color: yellow;
color: black;
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="app">
<header>Header</header>
<div class="container">
<div class="content">
Variable content height
</div>
</div>
</div>
Thanks a lot!
Keep overflow:auto and no need to use column as direction, simply keep it row. Then rely on margin:auto to keep the element centred:
Example with no overflow and centred:
html, body, .app {
height: 100%;
}
body {
margin:0;
}
.app {
background-color: blue;
color: white;
}
.app header {
height: 80px;
background-color: red;
}
.app .container {
display: flex;
flex-direction: row;
background-color: black;
height: calc(100% - 80px);
justify-content: center;
overflow: auto;
}
.app .container .content {
width: 300px;
height:100px;
background-color: yellow;
color: black;
margin:auto;
}
<div class="app">
<header>Header</header>
<div class="container">
<div class="content">
Variable content height
</div>
</div>
</div>
Example with overflow and scroll
html, body, .app {
height: 100%;
}
body {
margin:0;
}
.app {
background-color: blue;
color: white;
}
.app header {
height: 80px;
background-color: red;
}
.app .container {
display: flex;
flex-direction: row;
background-color: black;
height: calc(100% - 80px);
justify-content: center;
overflow: auto;
}
.app .container .content {
width: 300px;
height:900px;
background-color: yellow;
color: black;
margin:auto;
}
<div class="app">
<header>Header</header>
<div class="container">
<div class="content">
Variable content height
</div>
</div>
</div>
I have one container having some content centered in but I want to put something on the left and I am having trouble figuring out how to do this.
Is the only way to do this with absolute positioning? Here is the code I have been playing around with to show ads an example:
HTML:
<div class="container">
<p class="one">Left</p>
<p style="clear: both;"></p>
<div class="center">Center</div>
</div>
CSS:
.container {
background-color: gray;
text-align: center;
}
.container .one {
float: left;
background-color: aqua;
}
.clearfix:after,
.clearfix:before
{
display: table;
content: " ";
clear: both;
}
.container .center {
display: inline-block;
background-color: green;
}
CodePen:
http://codepen.io/anon/pen/NqeBNp
Try applying display:inline-block and float:left with some width of both the div.
.container {
background-color: gray;
text-align: center;
overflow: auto;
}
.container .one {
display: inline-block;
float: left;
width: 33%;
background-color: aqua;
}
.container .center {
display: inline-block;
float: left;
width: 33%;
background-color: green;
}
<div class="container">
<div class="one">Left</div>
<div class="center">Center</div>
</div>
You should use Flexbox, it is very easy to use. Let me know if this is what you were looking for?
Screenshot:
Live instance of the code --> https://jsfiddle.net/7fo5ceb6/
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>
</html>
//CSS
body{
margin: 0 !important;
height: 100vh;
width: 100vw;
}
#container{
display: -webkit-flex;
display: flex;
height: 60px;
width: 100%;
background: #5c5c5c;
}
#container>div{
padding: 10px 0px;
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
margin: 5px;
background: #ccc;
}