This question already has answers here:
CSS-only masonry layout
(4 answers)
Areas covered by Flexbox which are difficult or impossible to achieve with Grid
(3 answers)
Closed last month.
My first question is :
The difference between Flex vs Grid when creating a website.
Is it when you do display:flex that your body for example shrinks automated
and makes it smaller and smaller when with grid area template for example
and when you make your screen smaller the information dissapears / does not go automated with your new widths.
Second question :
In this example here with Flex.
When i make my browser smaller and width smaller then articles get under my aside so the main content starts to expand under the aside/main. Which i want when i make screen smaller that articles stay in this grey area and get below eachother in this same light grey area.
body {
width: 70%;
margin: 0 auto;
font-family: sans-serif;
color: #2a2a2a;
background-color: grey;
}
header{
grid-area:header;
}
header ul{
display:flex;
}
header li{
list-style:none;
flex:1;
}
main {
display: flex;
flex-wrap: wrap;/*maakt da je inhoud in je div blijft er niet buiten als je width aanpast*/
align-content: flex-start;
background-color: lightgrey;
}
aside {
flex: 1; /*is zelfde als 1fr in display:grid*/
margin-right: 10px;
background-color: #ff80ff;
}
#artikel1 {
flex:2;
}
#artikel2 {
flex:2;
}
#artikel3 {
flex:2;
}
#artikel4 {
flex:2;
}
aside li {
padding-bottom: 10px;
}
footer {
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCSS</title>
<link rel="stylesheet" href="training.css">
<style>
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul><li>Home</li><li>Contact</li><li>Nog informatie</li><li>content</li></ul>
</nav>
</header>
<main>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li>Oh I do like to be beside the seaside</li>
<li>Oh I do like to be beside the sea</li>
<li>Although in the North of England</li>
<li>It never stops raining</li>
<li>Oh well...</li>
</ul>
</aside>
<!-- It contains an article -->
<article id="artikel1">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<article id="artikel2">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<div class="break"></div>
<article id="artikel3">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
<article id="artikel4">
<h2>Article heading</h2>
<p>
tekst artikel 1
</p>
<h3>titel2</h3>
<p>
artikel2
</p>
</article>
</main>
<footer>
</footer>
</div>
</body>
</html>
I tried many possibilities.
Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.
Flexbox: The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes
When comparing the two, the main difference is that CSS Grid is better suited for creating two-dimensional layouts, while CSS Flexbox is better for one-dimensional designs. Moreover, using CSS Grid, elements are positioned using numerical coordinates, whereas Flexbox uses relative positioning and margins.
Related
On Chrome/FF my flex elements have equal heights (the height of the tallest element). But on IE11 they each have their natural height, so they end up having different heights.
How to make it behave on IE11 like on modern browser?
HTML (simplified):
<div class="parent">
<div class="child">
...
</div>
<div class="child">
...
</div>
</div>
CSS:
.parent {
display: flex;
flex-direction: row;
min-height: 100vh;
}
.child {
flex: 1 1 50%;
}
One workaround for this issue is to add min-height: inherit to your child class:
.parent {
display: flex;
flex-direction: row;
min-height: 100vh;
border: 2px solid blue;
}
.child {
flex: 1 1 50%;
border: 2px dashed orange;
min-height: inherit;
}
<div class="parent">
<div class="child">
Column 1
</div>
<div class="child">
Column 2
</div>
</div>
This guarantees that your child elements will expand to fill the parent.
In IE10 and IE11, containers with display: flex will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
Therefore you need to change the corresponding property on the .parent class.
.parent {
height: 100vh;
}
I try to understand your issue and found that #David Lagace has already informed you that the IE browser has some known issues with flex.
If you want a cross-browser solution and if you can remove the flex from your code then the below code sample can fix your issue.
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
<DIV id="container2">
<DIV id="container1">
<DIV id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<h2>2 Column Dimensions</h2>
<p>Each column is 50 percent wide with 2 percent padding on each side.</p>
<!-- Column one start -->
<h2>No CSS hacks</h2>
<p>The CSS used for this 2 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.</p>
<h2>No Images</h2>
<p>This Two column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<h2>No JavaScript</h2>
<p>JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.</p>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column one end -->
<!-- Column one end -->
</DIV>
<DIV id="col2">
<!-- Column two start -->
<h2>Cross-Browser Compatible</h2>
<p>This 2 column layout has been tested on the following browsers:</p>
<h3>iPhone & iPod Touch</h3>
<ul>
<li>Safari</li>
</ul>
<h3>Mac</h3>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9</li>
<li>Netscape 7 & 9</li>
</ul>
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<h2>This layout is FREE for anyone to use</h2>
<p>You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
<!-- Column two end -->
</DIV>
</DIV>
</DIV>
Output:
References:
Referenced answer
Equal Height Columns with Cross-Browser CSS
I'm using Bootstrap 4 (now I'm on alpha-6).
I have this situation:
<body>
<!-- HERE I HAVE one div automatically generated with randomly ID and class -->
<div class="bigone">
<div class="container-fluid">
<div class="header">
My header
</div>
</div>
<div class="mybar">
Nav bar
</div>
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="list-group list-group-flush">
<b>FIRST LINK</b>
Dapibus ac facilisis in
Dapibus ac facilisis in
Morbi leo risus
<b>LAST LINK</b>
</div>
<div class="card-footer">
Card Footer
</div>
</div>
</div>
<div class="col-6">
<h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br> So many words, so many words. So many words, so many words. So many words, so many words.
<br>
<h1>LAST LINE</h1>
</div>
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</div>
<!-- HERE THAT DIV CLOSED -->
</body>
This is the css:
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
There is a DEMO on plnkr: https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks3
I need footer to be on bottom when the page content is empty, for this reason I'm using: .bigone { height: 100vh; } and Bootstrap Flexbox align utilities like: <div class="bigone d-flex flex-column">
Now I need the list-group in card and the col-6 with "so many words" to be scrollable, so to have an height for both max to the bottom where the footer is.
In a nutshell: BODY must not have the scroll bar.
My header and footer height are not fixed, they change.
How to? I'm not a flexbox expert.
I don't need IE, just Chrome.
IMPORTANT:
I can't make my card height fixed with something like this:
height: calc(100vh - header.height - footer.height - etc...);
because my header, footer, etc. heights change dynamically.
Picture of the problem:
According to the spec, the setting flex: 1 (on the .main element) is equivalent to flex: 1 1 0, shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
However, for some reason, flex: 1 is not working as expected in your code. (I'm only checking in Chrome, per your question).
However, if you give .main the full shorthand – and make it a flex container and add overflow – your layout appears to work.
.main {
flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
display: flex;
flex-direction: column;
overflow-y: scroll;
}
revised plunkr
Reference:
7.1.1. Basic Values of flex
EDIT (based on changes to the question)
My answer above removes scrollbars from the body and provides a vertical scrollbar for the .main section.
To make vertical scroll bars available for each column in the .main section, make this adjustment:
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
revised plunkr
I have
<div class="fixed-top collapse show wrapper">
<ul class="list-group bg-white menu">
</ul>
</div>
I fixed it by
.wrapper {
margin-top: 48px; /* place it under navbar */
height: 100vh;
overflow: scroll;
padding-bottom: 48px; /* compensate margin top */
}
Created a new Plunker to showcase what you're looking for.
To keep the footer on the bottom use Bootstrap Flexbox Auto Margins.
If you want to keep your main content within the initial viewport height, use the flex-grow:1 property with overflow-y:scroll. Its height will adopt responsively based on the space the other elements use.
Hope this helped.
Im fairly new to the world of CSS and HTML, so my apologies in advanced.
I am having a problem getting my social media icons to center themselves at the bottom of my website.
They are sitting bottom heavy rather in the middle of the footer.
Attached is screen shot of the issue and the code behind it.
Image of current footer
CODE SNIPPET:
.page-footer {
background-color: #F06D71;
padding: 1em;
}
<footer class="page-footer">
<ul>
<img class="responsive-img" src="http://placehold.it/50x50">
<img class="responsive-img" src="http://placehold.it/50x50">
<img class="responsive-img" src="http://placehold.it/50x50">
</ul>
</footer>
I've attempted to add "padding-bottom" to the style sheet, but the icons just get smaller rather moving up a few pixels.
Any advice or any terms i should look into?
Regards
Use Flexbox:
.page-footer{
display:flex;
}
.page-footer ul{
align-items:center;
}
This will center the icons vertically inside the footer. You also should have the images wrapped in <li> tags within the list as list items. If you also want to nicely center them vertically you could add display: inline-block to the list elements and text-align center to its parent, the unordered list. So the final code would be:
.page-footer{
display:flex;
}
.page-footer ul{
justify-content:center;
text-align:center;
}
.page-footer ul li{
display:inline-block;
}
Also one more thing I noticed, you have added the same ID to all three images. An ID should be a unique identifier and only used on one element.
Here is a great tool to do that.
Simple solution:
For the class of .page-footer add a property of display: table;
Then wrap your image tags in a <div> and assign the property of display: table-cell to the div and also the property of vertical-align: middle;.
Doing this will vertically align anything inside that div to the middle of the element.
See this JsFiddle that I made as a demonstration.
It is not always obvious even for an experienced developer. If you want to have just images in your footer you could just do padding. Also you have missing <li> inside <ul> tag.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.footer-list-item {
list-style-type: none;
display: inline-block;
}
.footer-list {
padding: 50px 0;
background: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<ul class="footer-list">
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
</ul>
</div>
</body>
</html>
JSBin link
I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.
Since I prefer not to run a local server, I write my markdown within the main HTML file.
Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.
I am using CSS flex, it is working fine.
<style>
.container{
display: flex;
}
.col{
flex: 1;
}
</style>
<div class="container">
<div class="col">
Column 1 Content
</div>
<div class="col">
Column 2 Content
</div>
</div>
UPDATE:
Since pandoc supports fenced div,
::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::
For the style, we can either use flex or grid, both work fine.
Using flex
<style>
.container{
display: flex;
}
.col {
flex: 1;
}
</style>
Using grid
<style>
.container{
display: grid;
grid-auto-flow: column;
}
</style>
I created two ID's in an external css file, custom.css, which I attached to my reveal.js file with the field css: custom.css in the YAML header.
#left {
left:-8.33%;
text-align: left;
float: left;
width:50%;
z-index:-10;
}
#right {
left:31.25%;
top: 75px;
float: right;
text-align: right;
z-index:-10;
width:50%;
}
I placed div elements with the right and left ID's in my markdown document to produce a two column layout.
<div id="right">
- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements
</div>
.multiCol {
display: table;
table-layout: fixed; // don't fudge depending on content
width: 100%;
text-align: left; // matter of taste, makes imho sense
.col {
display: table-cell;
vertical-align: top;
width: 50%;
padding: 2% 0 2% 3%; // some vertical, and between columns
&:first-of-type { padding-left: 0; } // there's nothing before col1
}
}
Put this into your custom theme, i.e. right before
// Theme template ------------------------------
#import "../template/theme";
// ---------------------------------------------
How to use? – easy! And not limited to 2 columns:
<section>
<h3>Doing two-column (this headline still full-width)</h3>
<div class='multiCol'>
<div class='col'>
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
</div>
<div class='col'>
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
</div>
</div>
And simply more regular full-width text in the following. But hey, there is also:
<div class='multiCol'>
<div class='col'>Also works for 3 columns...</div>
<div class='col'>...as we can show in...</div>
<div class='col'>...this example here.</div>
</div>
</section>
No float needed
no clearfix needed
size independent (→ only percentages used)
2 columns, 3 columns, 4 columns ...
<table> ist often considered “outdated” (since it got so badly abused for layout purposes in early html days, and still today for html in emails...) but to the contrary at least as a property layout:table it has many legit uses, is often the most simple solution and widely compatible.
The CSS Grid Layout allows very flexible layouts, two-column formats and more complex layouts.
For two columns, the following CSS snippet may be used. It defines two column templates with equal size, each 1 fraction (1fr) of the available width, and a gutter space of 10px between the columns.
.twocolumn {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
text-align: left;
}
It can be used as follows
<section>
<h2>Slide Title</h2>
<div class="twocolumn">
<div>
Column One
</div>
<div>
Column Two
</div>
</div>
</section>
I solved the problem with two floating <div>-Elements:
<section>
<div style="text-align: left; float: left;">
<p data-markdown>- This is my first left element</p>
<p data-markdown>- This is my second left element</p>
<!-- more Elements -->
</div>
<div style="text-align: right; float: right;">
<p data-markdown>- This is my first right element</p>
<p data-markdown>- This is my second rightelement</p>
<!-- more Elements -->
</div>
</section>
I found out, if you want to use markdowns inside the div-container, you have to wrap the elements in p-tags. If you write data-markdown into the parent section-Tag, it will be ignored inside the div
I hope I could help!
I have found the following way to show one element in such a way it seems to be in a column layout
Text going to the right <!-- .element: style="float: right; width: 40%" -->
Text going on the left column <!-- .element: style="width: 40%" -->
But actually it doesn't work with more than one element on the right
I could not understand you completely but I guess you may found the answer in ramnathv post.
---
layout: slide
---
{{{ content }}}
<div class='left' style='float:left;width:{{left.width}}'>
{{{ left.html }}}
</div>
<div class='right' style='float:right;width:{{right.width}}'>
{{{ right.html }}}
</div>
it worked for me
How would I go about adding a comment section under each photo in this gallery?
(You can view an image of what I'm hoping to do here: - won't let me post a link because i'm a new member.... zhttp://www.some-things.net/storage/Picture109.p ng )
I know the iframe may not be the best way to be working this - but my friend wanted a sideways scroll area with wordpress integration and I couldn't find any suitable gallery plugins.
The images are displayed in a ul/ li - but because it's display-inline it won't let me put in another div below each image.
http://www.some-things.net/storage/anna/wordpress/?page_id=49
Basically I want to create a section under each picture that contains room for comment if needed - something like the picture above.
Any tips on the code needed would be great!
Put the image and the content in a div, and float all these divs to the left. use inline-block as display and whitespace: no-wrap.
<html>
<head>
<style type="text/css">
#container {
white-space: nowrap;
}
.image {
display: inline-block;
width: 150px;
}
.comment {
display: block;
white-space: normal;
}
</style>
<div id="container"><p>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
...
...
</p></div>