I've just started to learn html and css. I'm trying to create a 3x3 grid with inline-block "method". This is the code so far:
HTML:
<!doctype html>
<html>
<head>
<link href="ex.css" rel="stylesheet" type="text/css">
<title>ex</title>
</head>
<body>
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div id="r4"></div>
<div id="r5"></div>
</body>
</html>
CSS:
#r1 {
background-color: blue;
height: 300px;
width: 300px;
display: inline-block;
}
#r2 {
background-color: red;
height: 300px;
width: 300px;
display: inline-block;
}
#r3 {
background-color: blue;
height: 300px;
width: 300px;
display: inline-block;
}
#r4 {
background-color: green;
height: 300px;
width: 300px;
}
#r5 {
background-color: yellow;
height: 300px;
width: 300px;
}
Can someone help me to position #r5 (yellow box) near #r4 (green box) horizontally?
You need to wrap every row with another div like that:
HTML:
<body>
<div class="row">
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
</div>
<div class="row">
<div id="r4"></div>
<div id="r5"></div>
</div>
</body>
CSS:
#r1 {
background-color: blue;
}
#r2 {
background-color: red;
}
#r3 {
background-color: blue;
}
#r4 {
background-color: green;
}
#r5 {
background-color: yellow;
}
.row > div{
display: inline-block;
height: 300px;
width: 300px;
}
Flex is here to save the day! This is exactly the type of thing flex was made for, but beware - support for it on old browsers isn't very good. If you don't care too much about old browsers then I suggest using flex, as formatting how the page looks via HTML is frowned upon.
See this JSFiddle.
HTML:
<div id="container">
<div class="box" id="r1"></div>
<div class="box" id="r2"></div>
<div class="box" id="r3"></div>
<div class="box" id="r4"></div>
<div class="box" id="r5"></div>
</div>
CSS:
#r1 {
background-color: blue;
}
#r2 {
background-color: red;
}
#r3 {
background-color: blue;
}
#r4 {
background-color: green;
}
#r5 {
background-color: yellow;
}
.box
{
height: 100px;
width: 100px;
-webkit-flex: 0 0 100px;
flex: 0 0 100px;
}
#container
{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 300px;
}
This might not be sexy, but for basic purposes you could just add a line break every three divs:
<div id="r3"></div>
<br>
<div id="r4"></div>
Another alternative (perhaps more appropriate) is to set a fixed width for the container too, in your example:
body { width: 1000px; }
will actually take care of breaking the boxes apart, so every one of them could be inline-block.
And by the way, you don't need to keep duplicating all rules, try this:
div { display: inline-block; height: 300px; width: 300px; }
Related
I'm playing around with flexbox to get the hang of it but I am running into some issues. My goal is to have the window separated by four background colors where the first is just a header row and then the rest of the page is filled by 3 columns each a different background color. But for some reason if I write display: flex it doesn't show anything. Can someone explain to me how to get this desired effect?
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
}
.col {
flex: 1;
}
.col-container:nth-child(1) {
background: green;
}
.col-container:nth-child(2) {
background: blue;
}
.col-container:nth-child(3) {
background: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</body>
Here is a working example:
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
}
.col-1 {
flex: 1 1 33.333%;
background-color: green;
}
.col-2 {
flex: 1 1 33.333%;
background-color: blue;
}
.col-3 {
flex: 1 1 33.333%;
background-color: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col-1">ts</div>
<div class="col-2">dtd</div>
<div class="col-3">dt</div>
</div>
</div>
</body>
Here's what you needed to fix:
Set flex-direction to row. You most likely want the columns next to each other.
Add the classes to your HTML for the col-1, col-2 and col-3.
You need content in those col classes, or you won't see anything anyway.
I set a flex-basis (the third parameter in the flex shorthand) to 33.333%. You don't necessarily need this, but it's nice to see how much space a particular element will fill or change it.
EDIT For the comments:
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 150px;
background-color: red;
}
.col-container {
widows: auto;
height: auto;
display: flex;
flex-direction: row;
height: calc(100vh - 150px);
}
.col-1 {
flex: 1 1 33.333%;
background-color: green;
}
.col-2 {
flex: 1 1 33.3333%;
background-color: blue;
}
.col-3 {
flex: 1 1 33.3333%;
background-color: yellow;
}
<body>
<div class="container">
<div class="header"></div>
<div class="col-container">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</div>
</div>
</body>
Basically, you need to give the col-container a height. To achieve this, I used vh units in the calc statement. It subtracts your header height from the viewport height and gives the remainder. This also removes the necessity for filler content.
I have these two different layouts illustrated in the code below. My issue is that I can't replicate these layouts without changing the markup. I was wondering if there was some fancy flexbox way I can accomplish exactly this while only using one html scheme. Note: the container will need to have a dynamic height. The solution doesn't necessarily have to use flexbox as long as the desired layout is achieved.
main {
width: 750px;
max-width: 100%;
margin: auto;
border: solid 1px black;
display: flex;
flex-wrap: wrap;
}
.a {
background: red;
width: 40%;
}
.b {
background: blue;
width: 60%;
}
.c {
background: green;
}
.a-mobile {
background: red;
width: 40%;
}
.b-mobile {
background: blue;
width: 60%;
}
.c-mobile {
background: green;
width: 100%;
}
<h2>Desktop</h2>
<main>
<div class="a">a</div>
<div class="b">b
<div class="c">c</div>
</div>
</main>
<h2>Mobile</h2>
<main>
<div class="a-mobile">a-mobile</div>
<div class="b-mobile">b-mobile</div>
<div class="c-mobile">c-mobile</div>
</main>
display:grid will be useful for this kind of layout:
but this is still experimental and(2020) can be tested in few browsers, see also http://caniuse.com/#search=grid
A tutorial among others https://css-tricks.com/snippets/css/complete-guide-grid/
main {
display: grid;
grid-template-columns: 30% auto;
}
.a {
background: red;
grid-row-end: span 2
}
.b,
.c {
background: green;
}
.c {
background: lightblue
}
#media screen and (max-width: 700px) {/* value setted for the demo */
.a {
grid-row-end: span 1/* reset optionnal in this very case */
}
.c {
grid-column-end: span 2
}
}
<main>
<div class="a"> break point set at 700px for demo</div>
<div class="b"> i don't move much myself :)</div>
<div class="c"> see in full page to see me aside the red box and below the green one</div>
</main>
codepen to play with
Here's the float-flexbox method I described in the comments. Not particularly fond of it, but it does exactly what you asked for.
It's hacky and, from my POV, goes in the same category as Bootstrap 3's .clearfix::before|after hack — {display:table; content: " ";} — it is a practical solution to a real layout problem, usable until a better, cleaner one will have better browser support and render this one obsolete.
main {
width: 750px;
max-width: 100%;
margin: auto;
border: solid 1px black;
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
color: white;
}
.a {
background: red;
flex-basis: 40%;
}
.b {
background: blue;
flex-basis: 60%;
}
.c {
background: green;
flex-basis: 100%;
}
#media (min-width: 800px) {
main {
display: block;
overflow: hidden;
}
.a {
float: left;
min-width: 40%;
}
.b,.c {
padding-left: 40%;
}
.a,.c {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
}
<main>
<div class="a">a<br />a<br />a<br/>a</div>
<div class="b">b</div>
<div class="c">c</div>
</main>
<main>
<div class="a">a</div>
<div class="b">b<br />b<br />b<br/>b</div>
<div class="c">c</div>
</main>
<main>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c<br />c<br />c<br/>c</div>
</main>
Another solution, it's independent of flex box, and does not need fixed height.
Flexbox does not do a good job of adjusting to two dimensional layouts!
html {
height: 100%;
}
body {
height: 100%;
}
main {
width: 750px;
max-width: 100%;
margin: auto;
border: solid 1px black;
height: 100%;
}
.a {
background: red;
width: 40%;
height: 100%;
float: left;
}
.b {
background: blue;
width: 60%;
height: 50%;
float: left;
}
.c {
background: green;
width: 60%;
height: 50%;
float: left;
}
#media (max-width: 800px) {
.a {
width: 40%;
height: 50%;
}
.c {
width: 100%;
}
}
<h2>Desktop and Mobile</h2>
<main>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</main>
I'm using Bootstrap v4 alpha4
Currently I have:
.row
.col-xs-12.col-md-8
div A
.col-xs-12.col-md-4
div B
div C
For the xs layout, I'd like the div order to be:
Div B
Div A
Div C
I have no idea how to do this or how to even ask about it. I'm not a front-end dev so I don't know what things are called.
We can change the HTML to whatever we want. It does not have to stay like it is now.
Bootstrap does have column ordering classes, but in this case you can simply use the responsive float classes..
<div class="row">
<div class="col-md-4 pull-md-right">
b
</div>
<div class="col-md-8">
a
</div>
<div class="col-md-4">
c
</div>
</div>
http://www.codeply.com/go/XL5zJELyLD
So using the classes from bootstrap and some general style you can achieve that like I did in this pen.
http://codepen.io/TunderScripts/pen/PGadpr
The Html:
<div class="row">
<div class="col-xs-12 col-md-4 pull-right col1"></div>
<div class="col-xs-12 col-md-8 pull-left col2"></div>
<div class="col-xs-12 col-md-4 pull-right col3"></div>
</div>
the css:
.col1{
background: red;
height: 200px;
}
.col2{
background: blue;
height: 600px;
}
.col3{
background: green;
height: 200px;
}
You can change the default behavior by using their classes for floats(pull-left, pull-right).
Instead of flexbox, I used combination of float and position css properties to get the expected result. Assuming large width as 150px and small width as 100px.
Working Fiddle
.container {
width: 250px;
position: relative;
}
.blue {
width: 150px;
height: 300px;
background: blue;
position: absolute;
}
.pink {
width: 100px;
height: 100px;
background: pink;
float: right;
}
.green {
width: 100px;
height: 100px;
background: green;
clear: right;
float: right;
}
#media (max-width: 450px) {
.blue {
position: relative;
}
.green,
.pink {
float: none;
width: 150px;
}
}
<div class="container">
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
As promised, a simple draft
HTML
<div class="row">
<div class="col1">DIV A</div>
<div class="col2">DIV B</div>
<div class="col3">DIV C</div>
</div>
CSS
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
width: 400px;
margin: 0 auto;
}
.col1 {
width: 200px;
height: 400px;
background-color: #86a0ff;
}
.col2 {
width: 150px;
height: 150px;
background-color: #ff6cde;
}
.col3 {
margin-top: -200px;
margin-left: auto;
width: 150px;
height: 150px;
background-color: #35af6d;
}
#media (max-width: 768px) {
.row {
justify-content: center;
flex-direction: column;
}
.col1 {
order: 2;
width: 200px;
margin-top: 50px;
}
.col2 {
order: 1;
width: 200px;
}
.col3 {
order: 3;
width: 200px;
margin-top: 50px;
margin-left: 0;
}
}
As for explanation, here is a great guide to flexbox. The main idea in my example is that by using order property you can manipulate the order in which blocks are displaying. The main plus of using flexbox is that you won't need to load any library(such as Bootstrap) to achieve the desired result, such as responsiveness. And it also has a good browser support, unless you need to support older versions of browsers. I hope my answer will be helpful for you!
This question already has answers here:
Setting div width to 100% minus certain amount of px
(5 answers)
Expand a div to fill the remaining width
(21 answers)
Closed 6 years ago.
I will simulate what i need to achieve.
for example, i want that #2 took the whole space, remaining of 100% - 180px.. how to achieve that?
p.s. seems flexbox is more supported over devices than calc - http://css3clickchart.com/#flexbox
You can use flexbox model as shown below. Adding flex: auto; will allow the right content to use remaining width.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#parent {
display: flex;
height: 100%;
}
#left {
width: 180px;
background-color: hotpink;
}
#right {
flex: auto;
background-color: dodgerblue;
}
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Use css calc
Here with a example.. This might help:
.class {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
You can use float: left and overflow: hidden.
aside {
float: left;
width: 30%;
background: beige;
}
article {
overflow: hidden;
background: brown;
color: white;
}
<aside>
sidebar
</aside>
<article>
content
</article>
There are many ways to do this. One simple way is below.
1st way: Simple inline-block
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
display: inline-block;
background-color: green;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
Fair warning though: In this case the .main-content will only take the space it needs, and will not actually be full width. So If you want to set background to it, you should actually set the backround to .container.
2nd way: Use calc for width
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
position: relative;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
float: right;
background-color: green;
width: calc(100% - 180px);
height: 600px;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
3rd way: use Flex
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: flex;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
}
.main-content {
background-color: green;
flex: auto;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
Flexbox is probably the nicest solution, but saidly old browsers don't support it.
4th way of doing this is the oldfasioned way with faking tables:
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: table;
}
.sidebar {
background-color: red;
width: 180px;
display: table-cell;
}
.main-content {
display: table-cell;
background-color: green;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
I'm trying to make a child div of a flexbox layout fill its parent. In any other context setting the width/height to 100% causes a div to fill its parent... I only wish to use flexbox for my top level layout.
Problems
#map-container div will not fill #col1 even though it has height 100% set.
#controls div appears outside #col1 completely. I've previously used absolute layout to align boxes to corners without problems. Being inside a flexbox grand-parent seems to cause issues.
What I'm expecting is #map-container and #map to fill #col1 and #controls to align to bottom right-hand corner of #map.
.wrapper, html, body {
height:100%;
margin:0;
}
#col1 {
display: flex;
}
#map-container {
background-color: yellow;
width: 100%;
height: 100%;
}
#map {
background-color: purple;
width: 100%;
height: 100%;
}
#controls {
background-color: orange;
position: absolute;
right: 3px;
bottom: 3px;
width: 100px;
height: 20px;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
flex:2;
display: flex;
}
#col1 {
background-color: green;
flex: 1 1;
}
#col2 {
background-color: blue;
flex :0 0 240px;
}
<div class="wrapper">
<div id="row1">Header</div>
<div id="row2">
<div id="col1">
<div id="map-container">
<div id="map">
Map
</div>
<div id="controls">Controls</div>
</div>
</div>
<div id="col2">Sidebar</div>
</div>
</div>
#map-container div will not fill #col1 even though it has height 100% set.
It won't work that way, because for a percentage unit to work, it needs to have height set on its parent all the way up. This fights against the flex model, where the flex-items are distributed and arranged by the flex-box layout and have no dimensions set. Why use a flex layout when all your elements are 100%? Either do a 100% on all your element all the way up, or do a flex on all containers.
If you stick to flex layout, then you will have to get into nested flex. Otherwise, you will get #map-container to fill-up, but not the #map.
This fiddle http://jsfiddle.net/abhitalks/sztcb0me illustrates that problem.
#controls div appears outside #col1 completely. I've previously used absolute layout to align boxes to corners without problems. Being
inside a flex-box grand-parent seems to cause issues.
The only issue is that you are positioning it absolutely, but in relation to what? You need to position your #map-container relatively for that to work.
Here is how:
Fiddle: http://jsfiddle.net/abhitalks/sztcb0me/1/
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
html, body, .wrapper { height:100%; width: 100%; }
.wrapper { display: flex; flex-direction: column; }
#row1 { flex: 0 1 auto; background-color: red; }
#row2 { flex: 2 0 auto; display: flex; }
#col1 { flex: 1 0 auto; display: flex; background-color: green; }
#col2 { flex: 0 0 240px; background-color: blue; }
#map-container {
flex: 1 0 auto; display: flex;
position: relative; background-color: yellow;
}
#map { flex: 1 0 auto; background-color: purple; }
#controls {
background-color: orange;
position: absolute;
right: 3px; bottom: 3px;
width: 100px; height: 20px;
}
<div class="wrapper">
<div id="row1">Header</div>
<div id="row2">
<div id="col1">
<div id="map-container">
<div id="map">
Map
</div>
<div id="controls">Controls</div>
</div>
</div>
<div id="col2">Sidebar</div>
</div>
</div>
the problem is that it's wrapped in #map-container
.wrapper, html, body {
height:100%;
margin:0;
}
#col1 {
display: flex;
}
#map-container {
background-color: yellow;
width: 100%;
height: 100%;
}
#map {
background-color: purple;
width: 100%;
/* height: 100%; */
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
#controls {
background-color: orange;
position: relative;
/*right: 3px;
bottom: 3px;*/
width: 100px;
height: 20px;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
flex:2;
display: flex;
}
#col1 {
background-color: green;
flex: 1 1;
}
#col2 {
background-color: blue;
flex :0 0 240px;
}
<div class="wrapper">
<div id="row1">Header</div>
<div id="row2">
<div id="col1">
<!-- <div id="map-container"> -->
<div id="map">
Map
<div id="controls">Controls</div> <!-- add it here -->
</div>
<!-- <div id="controls">Controls</div> -->
<!--</div> -->
</div>
<div id="col2">Sidebar</div>
</div>
</div>
adding an absolute position controls in that way is not optimal (in the snippet I commented it out) ; you can place the controlsnested in #map (and use flex properties for correcting placement)