I am using Flexbox and I am trying to create something like this:
I want the three "parent" boxes to be vertically aligned within the row. Each box have different height.
In the snippet (Codepen is better in this case as there was a character limit in Stack) I am trying to replicate the first box as a start, the boxes float to the top. They are not vertically aligned:
.box, .box-first, .box-large, .box-nested, .box-row {
position: relative;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
background: #007FFF;
border: 1px solid #FFF;
border-radius: 2px;
overflow: hidden;
text-align: center;
color: #fff;
}
.box-nested {
background: #036;
border-color: #007FFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet"/>
<div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-nested"> <img style="width:30px; height:auto;" src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png"/> </div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111 222</div><div class="box-nested">105,306</div></div></div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111</div><div class="box-nested">222</div></div></div><div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">105,306</div></div></div></div></div></div></div></div></div></div></div></div></div>
When I tried adding the for the display: flex; align-items: center; in the CSS it messes up with the nested divs:
I am not that familiar with Flexbox and I have seen many different versions online that don't help.
Related
So, I am having an issue where I can mostly get my flexbox working, except when it comes to two columns side by side with uneven rows beside each other. For the life of me I can't figure out why it isn't working.
Here is the screenshot of how it looks now:
http://prntscr.com/ndig4v (by lightshot)
Here is the HTML:
/* Stats */
#stats-container {
width: 100%;
height: 100%;
border: 1px black solid;
}
#free-stats {
width: 100%;
height: 45%;
border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
#stats-column-one {
width: 75%;
}
#stats-column-two {
width: 25%;
}
#stats-flex-one,
#stats-flex-two {
display: flex;
flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
background: black;
display: flex;
flex-direction: row;
position: relative;
width: 55px;
border: 1px yellow solid;
}
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
Basically everything is correct, until it reaches the HR block, it SHOULD be on the right side. I want avoid using float: right;
I'm pretty sure I am doing this in the wrong order, but I am not sure which order I am messing up. I've played with it some, but each different thing I try I seem to break a bit more, this is the closest I've gotten.
I got it, I forgot the order in which things are supposed to work, but here is the fix
HTML:
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-container">
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
</div>
I just wrapped it all in another contain div, and added:
#stats-column-container {
display: flex;
flex-direction: row;
}
I also removed this completely
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
For reference on how it was supposed to look
http://prntscr.com/ndijk0 (by lightshot)
Hope this may help someone understand the order better in the future cause it confuses me sometimes.
I know this has been asked quite a few times here. But I'm not very experienced with HTML and am stuck following solutions suggested here.
My current implementation is like this. But the problem is if I stretch and adjust the browser window size, the borders of the four equal-sized quadrants follows. What I would like is:
The top area would be reserved for a load button and filter boxes.
The rest of the area would be divided up into four equally-sized quadrants.
When the browser window is adjusted, all five of these areas should not overflow into each other.
If I insert <div>'s inside each quadrant to draw plots, they should gracefully fall into place and will occupy four equally-sized areas regardless of the browser's size change.
What I'm trying to achieve looks something like in the picture below:
Thank you in advance for the help!
You can divide your 4 quadrants into 2 rows.
And give each row 100% width
and each quadrant a width of 50%
also,
make quadrants float left.
.row {
width: 100%;
padding: 0;
margin: 0;
}
.quad {
border: 1px solid black;
border-radius: 8px;
width: 49%;
padding: 0;
margin: 0;
height: 200px;
float: left;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Note: I have given 49% to quadrants so as to accommodate borders (they have 2 px width [1px each side])
You can also do this using flex CSS if you are targetting newer versions of browsers only.
In that case, you do not have to worry about widths.
Just give your row div : display: flex;
and your quadrants: flex: 1 1 auto;
Read more here about the flex display.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.row {
display: flex;
}
.quad {
flex: 1 1 auto;
border: 1px solid black;
border-radius: 8px;
height: 200px;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Using bootstrap 4 you can easily create such an layout. Bootstrap makes it much easier for developers to create a layout.
If you wanna use bootstrap, you can do following. Bootstrap 4 uses flexbox instead of float which is +1 comparing to bootstrap 3.
.vh-100 {
min-height: 100vh;
}
.choose-plot {
padding-top: 15px;
padding-bottom: 15px;
}
.bordered {
border: 1px solid #ccc;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="container-fluid d-flex h-100 flex-column vh-100">
<!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col choose-plot">
<strong class="mb-2">Add/remove COUNTRIES (max: 5), ADVERTISES (max 4), YEAR (max 1), and plot location below. Then, click 'load plot'.</strong>
<div class="row">
<div class="col-4">
<select class="custom-select">
<option>Choose plot</option>
</select>
</div>
<div class="col-8">
<button class="btn btn-primary">Load plot</button>
</div>
</div>
</div>
</div>
<div class="row flex-fill d-flex justify-content-start">
<div class="col-6 bordered">1 of 4</div>
<div class="col-6 bordered">2 of 4</div>
<div class="col-6 bordered">3 of 4</div>
<div class="col-6 bordered">4 of 4</div>
</div>
</div>
Dividing into rows too,
I suggest you to use box-sizing: border-box; so that when you set width to 50%, the borders sizes are taken into account.
.col {
width: 50%;
height: 160px;
float: left;
box-sizing: border-box;
border: 2px solid gray;
border-radius: 4px;
padding: 4px;
}
<div>Something here.</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">3</div>
<div class="col">4</div>
</div>
Hope it helps.
I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
I am trying to expand the height of first three col-md-1 divs to the rows maximum height which is expanded by two col-md-5, and also vertically align its contents. I am using grid system from bootstrap.
<div class="row load-container">
<div class="col-md-1">{{Id}}</div>
<div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
<div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
<div class="col-md-5 container">
<div class="row">{{From.Name}}</div>
<div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
<div class="row">{{pickupFormatted}}</div>
</div>
<div class="col-md-5 container">
<div class="row">{{To.Name}}</div>
<div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
<div class="row">{{deliveryFormatted}}</div>
<div class="row">{{expectedFormatted}}</div>
</div>
<div class="col-md-1">
{{Weight}}
</div>
<div class="col-md-2">
{{Distance.text}}
</div>
<div class="col-md-2">
{{Duration.text}}
</div>
<div class="col-md-4">
</div>
</div>
Edit:
Here is the method the sort-of works, except that the column widths are no longer affecting actual width.
.load-container {
padding: 5px;
display: table;
width: 100%;
}
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
text-align: left;
}
Ninja-edit:
This seems to work now
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
Spending way too much time on (what should be) a simple div table. PROBLEM: the column headers will not resize to the width of the table, or the rows. The rows appear okay, but the column headers don't.
Trying to avoid having fixed widths as the next table I post may have a different number of columns. With the following code the column headers are all scrunched to the left, next to each other, but they don't match the rows...
<style type="text/css">
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-weight: bold;
display: table-caption;
background-color: #e9e9e9;
text-align: center;
padding: 8px;
line-height: 21px;
font-size: 18px;
color: #CA8327;
}
.table-row {
display: table-row;
text-align: center;
}
.table-row-shade {
display: table-row;
text-align: center;
background-color: #e9e9e9;
}
.table-col {
display: table-cell;
text-align: center;
border: 1px solid #ca8327;
}
</style>
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-col">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/Speedy1/t3e3ken6/
You only put table-col rather than table-row
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-row"> <!-- must be a table-row -->
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/vgjb578s/
Try this http://jsfiddle.net/t3e3ken6/1/
It's because you have put the class "table-col" next to your heading. Change it to "table-row" and the problem is solved.
<div class="table-row">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>