Hi this is probably easier to explain with an image. I'm using foundation 6 to make a layout with a banner. The layout looks like this:
The issue I have is that I don't know how to do a pure CSS solution to get box 1, 2, 3 etc a third (with margins) of the responsive image. I can do it no problem with a few lines of jquery but I can't help but think this isn't really the best / fastest solution.
Like I said i'm using foundation 6 so happy to use flexbox to get it sorted if that's a way of doing it but so far my experimentation has failed.
I can post the code I have so far but I don't think it's particularly helpful since getting a layout like this easy it's just the height on the grey boxes doesn't extend the full height.
Thanks for any help
General
viewport measurements vw vh
percentage measurements
The outer container:
display: table
min-width: fit-content
Left
background-image background-repeat (in shorthand)
background-size
display: table-cell
Right is flexbox
display: flex
flex-flow: row wrap
align-content: space-between
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexSeries3</title>
<style>
#main { min-width: -moz-fit-content; min-width: -webkit-fit-content; min-width: fit-content; height: auto; overflow: hidden; display: table; table-layout: fixed; }
.iImg { width: 49vw; height: 96vh; display: table-cell; background: url(https://cdn0.vox-cdn.com/thumbor/xH2LQ-c4CZJp6X-Iv27s7kvDRts=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4106218/GettyImages-489748146_master.0.jpg) no-repeat; background-size: contain; background-position: center; outline: 3px ridge #999; }
.iFlex { display: flex; flex-flow: row wrap; align-items: center; align-content: space-between; width: 49vw; height: 96vh; background: #fff; }
.fBox { width: 48%; height: 32%; background: #777; margin: 1%; }
.fFoot { width: 98%; height: 32%; background: #777; margin: 1%; }
#f1 { order: 1; }
#f2 { order: 2; }
#f3 { order: 3; }
#f4 { order: 4; }
#f5 { order: 5; }
</style>
</head>
<body>
<main id="main">
<section class="iImg">
</section>
<section class="iFlex">
<div id="f1" class="fBox">1</div>
<div id="f2" class="fBox">2</div>
<div id="f3" class="fBox">3</div>
<div id="f4" class="fBox">4</div>
<div id="f5" class="fFoot">5</div>
</section>
</main>
</body>
</html>
Related
I have an effect on my website, and it only works within a 16:9 aspect ratio. This means I need to keep it within that aspect ratio. I wanted to make a box that was vertically and horizontally centered which could resize proportionally to contain the effect. I looked up many tutorials and guides on flex resizing, but i still cant get it to work properly. The padding in the that contains the box is lopsided, and it doesnt align properly either. It scrolls horizontally even though im using 100vh/vw?? Does 100% of the viewport's height really mean what it says?
I'm really not sure what to do...
Codepen example of my code below:
https://codepen.io/Ktashi/pen/KKeOJey
html
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
css
body {
padding: 0;
margin: 0;
}
.flex-align {
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.aspect-ratio-box {
height: auto;
aspect-ratio: 16/9;
background: red;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 94vw;
max-height: 94vw;
max-width: 94vw;
}
I tried changing the flex-grow: property's value, along with flex-shrink: and flex-basis: but that didn't help much. I'm very stuck as I've only really been coding with html and css for about a year off and on.
You can use the CSS media query to test whether the item will fit within the parent which has 100vw/100vh dimensions.
This snippet is just to give the idea.
It does a couple of things - makes the parent's padding be part of its dimensions by setting box-sizing border-box and sets the height or width as % of the parent dimensions.
.aspect-ratio-box {
aspect-ratio: 16/9;
background: red;
}
#media (max-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
width: 94%;
}
}
#media (min-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
height: 94%;
}
}
body {
padding: 0;
margin: 0;
background: black;
}
.flex-align {
background: blue;
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
I am building a page with two columns side-by-side that should fill the entire page. Both columns should both be 50% of the available width with no margin or padding on either side and take up 100% of the available height depending on the resolution.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.login-column {
float: left;
width: 50%;
background-color: #F4F6F9;
margin: 0;
}
.news-column {
float: left;
width: 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
flex-grow: 1;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Currently, the divs have no padding or margin on the top, left, and right; however, the background color only extends to the end of the text. I want the background to extend to the bottom of the page, without a scrollbar.
On a side note, I am using divs. Is this still recommended or should I be using the new, HTML5 things such as article, aside, .etc?
In order to get a DIV to fill the page in height you need to use this :
CSS
div {
height: 100vh;}
Also everything is explained in this post :
How to make a div 100% height of the browser window
remove floats, you can add height to your columns 100vh but in your head section of the page should be <meta name="viewport" content="width=device-width, initial-scale=1">
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.row {
display: flex;
}
.login-column {
flex: 0 0 50%;
background-color: #F4F6F9;
margin: 0;
height: 100vh;
}
.news-column {
flex: 0 0 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
height: 100vh;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
You can simply include height in div classes.
.login-column {height: 100%;}
.login-column {height: 100%;}
You shouldn't use floats and position: absolute, unless you absolutely know what you're doing. I suggest using a flex container to do what you want, and use max-height to make the two columns (sections) fill out the whole screen height. If you just use height: 100vh, the columns will stay at that height blocking things from overflowing.
Also note how I use class syntax to reuse CSS code.
body {
margin: 0;
padding: 0;
}
.flex-container {
width: 100%;
display: flex;
}
section {
min-height: 100vh;
flex-basis: 50%;
box-sizing: border-box; /* To let padding be part of the width */
padding: 1rem;
}
section.left {
background-color: #F4F6F9;
}
section.right {
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}
<body>
<div class="flex-container">
<section class="left column">
Ladidaa
</section>
<section class="right column">
Tralalaa
</section>
</div>
</body>
Did you try to create a content div that contains the columns, i would try something like this.
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
.columns-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.login-column {
display: flex
background-color: #F4F6F9;
margin: 0;
width: 50%;
}
.news-column {
display:flex;
background-color: blue;
margin: 0;
width: 50%;
height: 100%;
}
<div class="columns-container ">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Regarding use of div, article and aside, actually they are used for to code semantic Html to get the best result for Search Engine Optimization and other bots related activity also good for other developers to understand code flow. Not answering your primary question as it already answered many times, let me know if you are not satisfied with other answers :)
Note: Using div is all fine in your case, don’t worry.
I'd like to create a responsive page with a fixed html structure so I can just adjust the css. I would like to create rows with vertically and horizontally centered texts. The divs should fully stretch across the parent div.
My HTML...
<body>
<div class="parent">
<div class="d1">
one
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
</body>
My CSS...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
background-color: lightblue;
height: 100%;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
However here I am setting d1, d2 and d3 to the height of 100px and not 100% of the parent div. Example here: https://jsfiddle.net/bLf2sxq0/
My second idea was to use display: table for the parent which results in table-rows for the childs but then I end up with the same stretching issue plus the texts are not vertically centered. Here the css would be like this ...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
display: table;
background-color: lightblue;
}
.d1, .d2, .d3 {
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
Example here: https://jsfiddle.net/qmbzkwr2/
Is there a way to stretch the divs vertically along the parent and keep the texts centered vertically and horizontally within the divs? So I would not have width 100px but something like calc(100%/3) or any other solution to do this? Or maybe by using the flex grow option? Easiest way would do it :)
Thanks for any help!
You're on the right track. Use flexbox to stretch and fill items vertically and evenly. Remember to set parent containers (e.g. body, html) to height: 100%.
From here, if you want control over some items, use flex on any individual item, like flex: 1 1 300px on class .d2 for example.
Codepen
body, html {
height: 100%;
}
.parent {
background-color: lightblue;
height: 100%;
display: flex;
flex-direction: column;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.d2 {
background-color: lightgreen;
}
<div class="parent">
<div class="d1">
<div class="d11">
one
</div>
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
So basically i have this markup
<div class="container">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
</div>
How will i be able to have alternate width for the first & second div per row?
I tried article:nth-child+ diff stepping to target alternate divs, but i cant find the right combination of stepping
Edit: I really can't edit the HTML structure since this is a WordPress plugin output
You will need to use :nth-child() selector here...
Actually here the pattern is repeating itself after every 4th element...So you will need to taregt 4n, 4n+1, 4n+2 and 4n+3
.container {
display: flex;
flex-wrap: wrap;
}
article {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
border: 5px solid #fff;
background: gray;
box-sizing: border-box;
color: #fff;
font: bold 20px Verdana;
}
article:nth-child(4n),
article:nth-child(4n+1) {
width: 25%
}
article:nth-child(4n+2),
article:nth-child(4n+3) {
width: 75%
}
<div class="container">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
<article>10</article>
<article>11</article>
<article>12</article>
</div>
you should apply class for correct adjustment of articles use only two class with width 66% and 33%
1
2
3
4
5
6
article
{
float:left;
height:50px;
width: 30%;
background: #444;
margin: 0 0 5px 0;
}
article:nth-child(2n) {
background: #f0f;
width: 70%;
float: right;
}
article:nth-child(3n) {
width: 70%;
}
article:nth-child(4n) {
width: 30%;
float: right;
}
You can use flexbox. With display: flex;flex-wrap: wrap; on ".container" and flex-grow: 1;flex-shrink:1; on article. The article will get the width based on the content.
With flexbox you can do anything, here is a good tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}