How to create this kind of layout with CSS without complex use of position:absolute
(looking for simple methods). Consider also a "responsiveness" of the page.
Any ideas?
Thank you
Check out this post for why Flexbox is the best: http://uidevdaily.com/2018/why-you-should-start-using-flexbox/. I made a Jsfiddle to answer your question: https://jsfiddle.net/q6ac134L/13/. Below is the CSS code:
div {
height: 100vh;
}
.main-container {
display: flex;
}
.col-1 {
background-color: green;
flex-basis: 100px;
}
.col-2 {
background-color: gray;
flex: 1;
}
Related
I am carrying out my first "web design project?", and I am having this issue:
If the screen is +922px, I want the articles (flex-items) to fill as much width as available, but always forming a two-column layout inside the main (flex-container). When the screen is less than 922px, I want them to position in one column.
Is it possible to do this with flexbox, or I made a bad decision and I should use grid/media queries/column-count: 2 instead?
For now, I am uncapable to give the articles a reasonable width without them displaying into a 1-column layout when I shrink the page a little. I would like the items to shrink/grow a bit according to the browser length.
Sorry for my English by the way.
.main {
grid-column: 2/3;
grid-row: 2/3;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.main__title {
min-width: 100%;
margin-bottom: 0;
}
.article {
width: 500px;
}
.article__title {
width: 100%;
}
.article__p {
max-width: 75%;
margin: 0px;
}
.article__img {
margin: 1em;
width: 20%;
float: left;
}
The entire code here: https://github.com/llfontbote/DAW-M9
I'm newish to flexbox. My current layout isn't working as well as I'd hoped - my columns are only as tall as the content within them.
+----------------+
| header |
+-+--------------+
|n|content |
|v+--------------+
+-+
empty
----------------------
I'm hoping flexbox will solve that. I'll have to retrofit my existing markup.
Page is full screen width, with a full-width header, then the rest of the page is fluid width content with a fixed width sidebar. (Some pages have a sidebar on the left, others have one on the right.)
Ideally, the two content areas will both extend to the bottom of the page (with their coloured backgrounds) but only go over the fold and scroll if the content is longer than a page.
+----------------+
| header |
+-+--------------+
|n| content |
|a| |
|v| |
--+-+--------------+--
Do I treat the entire page as the "container", in which I create two rows, one of which is split? Or do I just start the flexbox stuff with the second row that has the sidebar?
It seems to me, it has to be the former, if flexbox is to know how high my header is. Otherwise, when I set their heights to 100%, they'll go over the fold by an amount equal to my header.
I didn't see a header-and-split-columns as a simple example in the flexbox docs, but I'll continue to read and experiment.
(Naturally, it will also have to be responsive, so that, at smaller screen sizes, the elements wrap under each other to fit on a narrow screen.)
OK, gathering all the feedback I've gotten above, and borrowing heavily from here, this is what I came up with.
<div class="page-body no-nav no-aside">
<main>
<p>content</p>
</main>
<nav>nav</nav>
<aside>details</aside>
</div>
.
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: blue;
header {
height: 155px;
}
.page-body {
display: flex;
flex: 1;
background-color: lavender;
flex-direction: column;
min-height: calc(100vh - 155px);
min-height: -webkit-calc(100vh - 155px);
nav {
order: -1;
background-color: red;
}
aside {
background-color: orange;
}
&.no-nav nav,
&.no-aside aside {
display: none;
}
}
}
#media (min-width: 768px) {
.wrapper {
.page-body {
flex-direction: row;
flex: 1;
main {
flex: 1;
}
nav {
flex: 0 0 385px;
}
aside {
flex: 0 0 320px;
}
}
}
}
Header is fixed height
Page-body fills the rest of the page
pretty straightforward to add a footer if needed (see Holy-Grail article above)
all columns are full height, no scrolling unless content flows
sidebars are fixed width, content body is fluid
structure is responsive
added some functionality to hide/show the sidebars as-needed per page
Oddly, this defaults to small-screen as has a media query that overrides for larger screens. (Usually the other way around where I come from.)
You can use calc for the min-height (assuming header height as 50px):
.content {
min-height: calc(100% - 50px);
min-height: -webkit-calc(100% - 50px);
}
As for the fixed width sidebar, prevent it from growing or shrinking:
.sidebar {
flex-shrink: 0;
flex-grow: 0;
}
I would only put the sidebar and the content in the flex box. Put both the sidebar and the content inside a container div and assign display:flex to the container:
.container {
display: flex;
flex-direction: row;
}
You will likely need your sidebar to collapse or become fluid with media queries when the window width decreases to a certain point. Also, I find this tool helpful when working with flex, as it does get complex.
You can create two flexboxes - one to divide header and "rest", and the other inside "rest" to divide it into nav and content.
Also you can just set min-height of header, as can be seen here
I hope I've understood your question.. This approach might help get you started. Let me know if you have any specific questions...
body {
margin: 0;
height: 100vh;
font-family: sans-serif;
color: white;
}
.container {
height: 100%;
background: grey;
display: flex;
flex-direction: column;
}
header {
height: 150px;
background: blue;
}
.content {
height: 100%;
display: flex;
background: green;
}
.sidebar {
background: #76c5ff;
width: 200px;
}
.main {
background: #ef3a59;
flex: 1;
}
#media (max-width: 600px) {
body {
height: initial;
}
.content {
height: initial;
}
.content {
flex-direction: column;
}
.sidebar {
width: 100%;
order: 2; /* remove this to keep sidebar above main content */
}
}
<div class="container">
<header>header
</header>
<div class="content">
<div class="sidebar">sidebar</div>
<div class="main">main content</div>
</div>
</div>
In susyless CSS, I could make containers with various content lengths grow to the height of of their tallest sibling using display: table and display: table-cell.
.not-susy {
.short {
width: calc(100%/12 * 8);
}
.wrap{
display: table;
border-spacing: 20px;
}
.item {
margin: 5px;
display: table-cell;
}
}
However this trick isn't working with Susy; How can I acheieve this same layout trick with Susy?
Meister
You are probably using the span() mixin, which is based around display: float. Instead, try using your usual technique, and only apply the span() function to set your width:
.susy {
.short {
width: span(8 of 12);
}
.wrap{
display: table;
border-spacing: gutter();
}
.item {
margin: 5px;
display: table-cell;
}
}
I also used Susy's gutter() function to set the border-spacing. The span() and gutter() functions are the best part of Susy, because you can apply them to any property, and stay in control of everything else.
I am trying to get two columns of content the same height using the CSS tables method. However, for some reason, the first column has extra padding at the bottom, the second column has extra padding at the top.
I am using the same code I usually do and cannot find the source of the problem when inspecting the code. I have double checked my code and look at other examples but cannot find the cause of this problem.
The code I am using is:
.archive-post{
display:table;
vertical-align: top;
padding:20px 0px;}
.archive-post .left-column{
display:table-cell;
width:60%;}
.archive-post .right-column{
display:table-cell;
width:40%;
padding-left:20px;}
Or you can see a live link here.
Use vertical align
.archive-post .left-column,
.archive-post .right-column {
vertical-align: top;
}
This should to the trick.
Just a small idea.. have you tried flexbox, for that? It's really a simple and easiest way to do that. Plus you can use position:absolute; inside the columns (display:table and display:table-cell do not allow that).
* {
box-sizing: border-box;
line-height: 2;
}
main {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1.25em 0em;
}
section {
background-color: #ccc;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
aside {
background-color: #ccc;
margin-left: 20px;
width: 40%;
}
<main>
<section>
left column.<br>higher then the other
</section>
<aside>
right column
</aside>
</main>
I'm looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.
They should not break in two lines but hide if not enough place. I'm trying with this example, but it doesn't work.
There is a similar question, but's it's not the same scenario as size is unknown.
Help is appreciated
Write like this:
.container {
white-space: nowrap;
}
.d1,
.d2{
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.d1 {
background-color:#ff0;
}
.d2 {
background-color:red;
}
Check this http://jsfiddle.net/xcSXA/5/
float: left does not give you, what you need.
Try display: inline
http://jsfiddle.net/xcSXA/3/
Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.
HTML
<div class="container">
<div class="d1">icon</div>
<div class="d2">This can be very very very very large.</div>
</div>
CSS
.container {
white-space:nowrap;
overflow:hidden;
width: 100px;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
display: inline-block;
background-color:red;
}
Working Example: http://jsfiddle.net/C4Wfa/
.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.
I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}
You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50