Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
For some reason my css and html is not showing up on the webpage. It only shows the h1 title of Tic-Tac-Toe. I've written the code out to match what my homework list but I am missing something and I've started over several times and cannot seem to get what I am missing. maybe I'm reading the homework wrong?
h1 {
text-align: center;
}
.top {
padding: 3em;
float: left;
height: 100px;
width: 100px;
border-bottom: 1px black solid;
}
.middle {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
}
.center {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}
.bottom {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
}
.row {
clear: both;
width: 302px;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">
<div id=b oard>
<h1>TicTacToe</h1>
<div class="row 1">
<div class="top left"></div>
<div class="top middle"></div>
<div class="top right"></div>
</div>
<div class="row 2">
<div class="middle left"></div>
<div class=".center"></div>
<div class="middle right"></div>
</div>
<div class="row 3">
<div class="bottom left"></div>
<div class="bottom middle"></div>
<div class="bottom right"></div>
</div>
</div>
</html>
In your code the first thing I noticed is that you're trying to display items where each one is wider than its container, so the three columns on each row overflows the row total width, so they stack on each other.
Try to use box-sizing: border-box You can read about it here
The important thing is:
It seems that this homework is somewhat old, as it gives tips to build the board using css in a manner we don't use anymore.
The float property is really not the best way to arrange the elements of the page. Since that property was created a long time ago, when the websites were very different, basically texts and images, it was intended mainly to arrange images inside blocks of text. So it produces some really weird results sometimes, if you don't have total knowledge of how it works. see this for details
You could try to use flexbox, once you study and understands the basics of how it works, your life would be a lot easier!
A complete guide to flexbox
With flexbox you could do something like:
div {
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 300px;
height: 100px;
background-color: grey;
}
.col {
flex: 1;
margin: 10px;
background-color: blue;
}
<div id= board>
<h1>TicTacToe</h1>
<div class="row">
<div class= "col"></div>
<div class= "col"></div>
<div class= "col"></div>
</div>
<div class="row">
<div class= "col"></div>
<div class= "col"></div>
<div class= "col"></div>
</div>
<div class="row">
<div class= "col"></div>
<div class= "col"></div>
<div class= "col"></div>
</div>
</div>
I used margins and background colors just to make it easier to see the boxes, you can change it as you need.
Other way you could resolve this is by using CSS Grid layout
The essential mistake you made is that the different borders produce different heights and widths for those elements, since the 1px borders are added to the height and width, and therefore some floating elements will go to the next row since there's 1px too little vertical space to make it fit in the same row, messing up the intended layout. (Some elements are 102 high, some 101px)
But if you add box-sizing: border-box, the border width is included in the height and width, so each of your element will really be 100x100px, including the borders.
That's done in my snippet below. The borders obviously are still not correct, but fixing that is up to you now...
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.top {
padding: 3em;
float: left;
height: 100px;
width: 100px;
border-bottom: 1px black solid;
}
.middle {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
}
.center {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}
.bottom {
float: left;
height: 100px;
width: 100px;
border-top: 1px black solid;
}
.row {
clear: both;
width: 302px;
text-align: center;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="app.css">
<div id=b oard>
<h1>TicTacToe</h1>
<div class="row 1">
<div class="top left"></div>
<div class="top middle"></div>
<div class="top right"></div>
</div>
<div class="row 2">
<div class="middle left"></div>
<div class="center"></div>
<div class="middle right"></div>
</div>
<div class="row 3">
<div class="bottom left"></div>
<div class="bottom middle"></div>
<div class="bottom right"></div>
</div>
</div>
</html>
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
A very short prehistory
My story begins with struggling to make overflow-wrap: break-word; working inside a flexbox. Flexbox container didn't want to understand that its item can be shrunk despite the fact that the item can break long words:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex-column {
display: flex;
}
.item {
overflow-wrap: break-word;
background-color: #fff;
padding: 8px;
}
<div class="body">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
Fortunately, we can help flexbox to understand that it can shrink its item using min-width: 0; on the item:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex-column {
display: flex;
}
.item {
overflow-wrap: break-word;
background-color: #fff;
padding: 8px;
/* Okay, it fixes this */
min-width: 0;
}
<div class="body">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
However, the real world is a little bit more complicated.
The problem
In our application, we have many nested flexboxes. So the example should look like this:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
min-width: 0;
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you may see, the flex container of our flex-column ignores the fact that its children can shrink very well. I do not understand why is it behaves that way. Could you explain this to me? Why is the flexbox-container doesn't respect its child flexbox min-width: 0?
The solution that I've found is to set min-width: 0 to all flexboxes in the hierarchy which looks very hacky and dangerous because I can break our application layout in unexpected places.
To understand this, simply add border with different colors to your items and you will see that you have overflow at different levels. More precesily, we have only one overflow that is moving to a lower lever after adding each min-width.
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;">
<div class="flex" style="border:5px solid blue;">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
Every min-width will fix one overflow, allow the element to shrink and move the overflow to next level. That's why you need a cascading min-width.
Adding one:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex" style="border:5px solid red;">
<!-- adding min-width at this level -->
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Adding another:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<!-- adding min-width at this level -->
<div class="flex" style="border:5px solid blue;min-width:0">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
Again:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;min-width:0">
<!-- adding min-width at this level -->
<div class="flex-column" style="border:5px solid yellow;min-width:0;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
The last one:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}
<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;min-width:0">
<div class="flex-column" style="border:5px solid yellow;min-width:0;">
<!-- adding min-width at this level -->
<div class="item" style="border:5px solid pink;min-width:0">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
EDITED:
I have the following HTML code:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="height: 11"></div>
<div class="appuntamentoContainer">
<div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
</div>
</div>
<div class="div-table-col">
<div style="height: 0"></div>
<div class="appuntamento">11:00 - 11:45</div>
<div class="appuntamento">11:00 - 12:00</div>
<div class="appuntamento">11:45 - 12:30</div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
</div>
</div>
and CSS:
.div-table div.appuntamento {
background-color: #f3f2de;
padding: 3px 5px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.div-table {
display:table;
width:auto;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
height: 45px;
}
.div-table-col {
float:left;/*fix for buggy browsers*/
display:table-column;
width:154px;
}
.div-table-row .div-table-col{
border-left: 1px solid #d7dde6;
border-right: 1px solid #d7dde6;
border-top: 1px solid #d7dde6;
min-height: 44px;
}
.div-table-first-col {
float:left;/*fix for buggy browsers*/
display:table-column;
text-align: right;
width: 45px;
}
.div-table-first-col div{
padding: 3px 5px;
}
Here the fiddler
Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?
Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.
Here's the JSFiddle.
add height: 100% on parents table and td.
table {
height: 100%;
}
td {
height: 100%;
}
for reference look here: Make div stretch to fit td height
Check this out for some dynamic behaviour:
jQuery
var a=$(".second").outerHeight();
$(".first").height(a);
$(".third").height(a);
https://jsfiddle.net/1cejh0dL/6/
I'm working on my Chemistry application, and I'm struggling with displaying div element how I imagined it could work.
My goal is to have divs floating left as on image: so when hiding red/green div everything stays in order.
Is it even possible without using absolute/fixed positioning? I really need those divs to float left and be aware of each other so I can't solve it by position absolute. I tried experimenting with adding margin, but other div cannot fit into place taken by other element margin.
Thank you for your time spent on reading this post!
Code added:
<div class='container'>
<div class='base-cell'>S</div>
<div class='base-cell'>O</div>
<div class='index-cell'>3</div>
<div class='charge-cell'>2-</div>
</div>
.container{
border: 1px solid red;
height: 1.5em;
text-align: center;
position: relative;
}
.base-cell{
position: relative;
background: red;
height: 1em;
float: left;
margin-top: 0.2em;
font-size: 1em;
border: 1px solid orange;
display: inline-block;
}
.index-cell{
position:relative;
height:0.7em;
margin-top:1.5em;
font-size:0.7em;
display:table;
background: blue;
float:left;
}
.ion-index-cell{
position: relative;
height: 1em;
font-size: 0.7em;
border: 1px solid cyan;
display: table;
background: green;
}
.charge-cell{
height: 1em;
font-size: 0.7em;
border: 1px solid blue;
display: inline-block;
float:left;
}
Edit:
Thank you for your replies, I really don't want to use middle column solution, because of another requirement: sorry for not showing full context before.
As you can see in the picture, all elements flow to the left, and I may need to hide some by using display: none. Thats why I'm looking for parentless solution:
If you flip the diagram on its side then its a lot easier to build using floats. You can use transforms to flip it back up the correct way.
.wrap {
max-width: 100px;
-webkit-transform: rotate(90deg) translate(-170px, -10px);
-moz-transform: rotate(90deg) translate(-170px, -10px);
-ms-transform: rotate(90deg) translate(-170px, -10px);
transform: rotate(90deg) translate(-170px, -10px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
overflow: hidden;
}
.block {
height: 40px;
width: 100%;
float: left;
border: 1px solid #000;
box-sizing: border-box;
margin: 10px 0;
}
.block-left {
max-width: 40%;
border-color: #f00;
}
.block-right {
max-width: 40%;
float: right;
border-color: #0f0;
}
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-left"></div>
<div class="block block-right"></div>
<div class="block block-bottom"></div>
</div>
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-right"></div>
<div class="block block-bottom"></div>
</div>
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-left"></div>
<div class="block block-bottom"></div>
</div>
This may help you somewhat. Its very crude html but I believe does what your looking for. It should at least help you in the direction your looking to go.
<div style="height:100%;">
<div style="float:left; width: 33%;">
Content 1
</div>
<div style="float:left; width: 33%;">
<div style="height:50%">
<div>Content 2</div>
</div>
<div style="height:50%;">
<div>Content 3</div>
</div>
</div>
<div style="float:left; width: 33%;">
Content 4
</div>
</div>
From your question, it looks like you just want to use float:left instead of position:absolute which you are using currently and still want to hide the green and red boxes, while keeping all other boxes intact.
This can be achieved by using float:left; on the boxes while setting the opacity:0; on the red and green boxes (also visibility:hidden work).
So I'm not sure how you are handling the mark up but hopefully you are doing it the proper way. It seems like you have a grid-format in place but you are not applying this on the middle column.
What you should be doing is creating three columns and then when necessary, you can hide the middle column. The red and green box can exist within the middle column. This way if you ever say wanted to add those red/green sections in the left or right column, you can easily do that.
I have created an example below. I have also added a class called hide which can apply to the different columns and/or inner boxes. Like I was mentioning above, you should be adding hide to the middle col if you want to hide everything in the middle column. Apply hide to the inner elements if you want to hide one of those.
I do some absolute positioning in the middle column but you don't actually need to do this -- you can change this to float: left and simply set a margin-top for the bottom box.
.col {
float: left;
width: 100px;
height: 200px;
border: 1px solid black;
margin-left: 10px;
position: relative;
}
.inner {
width: 100px;
height: 75px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.top {
top: 0;
border: 1px solid red;
}
.bottom {
bottom: 0;
border: 1px solid green;
}
.hide {
display: none;
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
EDIT: I notice you posted your CSS and you're using display: table. For that I would like to refer you to this link.
shouldiusetablesforlayout.com
EDIT2: I see you updated your question but the overall concept applies. You are still dealing with columns but I guess in your case now, you kind of want those columns in containers.
.col-container {
float: left;
margin-bottom: 10px;
}
.col {
float: left;
width: 100px;
height: 200px;
border: 1px solid black;
margin-left: 10px;
position: relative;
}
.inner {
width: 100px;
height: 75px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.top {
top: 0;
border: 1px solid red;
}
.bottom {
bottom: 0;
border: 1px solid green;
}
.hide {
display: none;
}
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner hide"></div>
</div>
<div class="col right"></div>
</div>
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner hide"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
</div>
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
</div>
If you view it in full page, and shrink the window size, you'll see the 3rd col-container to appear on the second line. If you want to make sure it only has two columns or things break at certain points you can adjust for that by either adding clear to certain elements, distinguishing row classes, etc.
I would use flexbox and justify-content: space-between; should be the thing you are asking for.
<article>
<div>left</div>
<div class="content">
<p>top</p>
<p>bottom</p>
</div>
<div>right</div>
</article>
article {
display: flex;
min-height: 10em;
}
article > div {
flex: 1 1 calc(33.3333% - 1em);
margin: 0.5em;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Codepen sample (w/ -prefix-free, styling and as SCSS)
Simple ;)
I have the following JS Bin
<div class="container">
<div class="column">
<div class="cell">Top left</div>
<div class="cell">Top left bottom</div>
</div>
<div class="column">
<div class="cell">Center</div>
</div>
<div class="column">
<div class="cell">Top right</div>
<div class="cell">Top right bottom</div>
</div>
</div>
How can I make vertical aligned divs without explicit setting of height and position to absolute to look like the following:
EDIT: Please don't suggest me using of tables because I need to resolve my problem in the example above.
How about using CSS tables with your current markup:
FIDDLE
CSS
.container {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.cell {
border: 1px solid #000;
width: 100px;
font-size: 13px;
}
.column:nth-child(2)
{
border: 1px solid #000;
}
.column:nth-child(2) .cell
{
border: none;
}
Add this to your stylesheet:
.column:nth-child(2) .cell {
padding-bottom: 18px;
}
DEMO