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
Related
I have three column's and the middle column has a button which i want to vertially align in the middle.
<div class="row">
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
<div style="vertical-align:middle">
<button type="button">Click</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
</div>
Style
.mypanel {
height: 200px;
border: 1px solid black;
}
However vertical-align:middle does not make any affect on the content of the div
DEMO
.mypanel {
height: 200px;
border: 1px solid black;
display:table;
}
.mypanel div{
display:table-cell;
vertical-align:middle
}
this will solve the problem
https://jsfiddle.net/xyx3enz1/
.mypanel {
height: 100px;
width: 100%;
display: table;
border: 1px solid black;
}
.text-centered {
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div class="row">
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
<div class="text-centered">
<button type="button">Click</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
</div>
My favorite approach is to use pseudo elements like :after to create an element, set its height, and then vertical align based on that. It doesn't require much CSS either:
// I changed the col-md-1 to col-md-4 for this example
.col-md-4 {
text-align: center;
height: 200px;
}
.col-md-4 .mypanel {
height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is
}
// Here is the pseudo element, set the vertical align here and on your button
.col-md-4:nth-child(2) .mypanel:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.col-md-4:nth-child(2) .mypanel button {
vertical-align: middle;
display: inline-block;
}
Check out this working jsFiddle.
I try to display a left and right area but it's not working actually with the cotes "right" and "left"
I tried the position :absolute but it's display me something strange
Maybe I'm doing something wrong with my conteneur div or my div element1
Someone knows how I can achieve that?
#conteneur {
padding-top: -25px;
display: flex;
border: 2px solid black;
padding-bottom: 10px;
}
#element1 {
display: block;
width: 350px;
border: 1px solid black;
}
.right {
float: left;
width: 100%;
}
.left {
float: right;
width: 100%;
}
<div id="conteneur">
<div id="element1">
<img src="{{ public_path('../public/uploads/logo-FFRXIII-2017-01.png')}}" style="max-width: 300px;">
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
</div>
</div>
you are using flexbox, so stick with flexbox and forget floats
#conteneur {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
border: 1px solid black;
padding-bottom: 10px;
}
.img {
flex: 0 100%;
}
img {
max-width: 300px;
}
<div id="conteneur">
<div class="img">
<img src="http://placehold.it/300x200">
</div>
<div class="right">
adresse_right
</div>
<div class="left">
adresse_left
</div>
</div>
First of all your
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
Won't react to your CSS since these are ID's and in your CSS you are trying to find classes with the . selector. So change the . to a # or change your ID tags to Classes.
Secondly i've created a jsfiddle and edited your code hope this helps!
I have an outer DIV (4) and three inner DIVs (1-3). I don't care about width here. It's all about height and vertical centering. I want the outer DIV (4) to get the height of the highest inner DIV (2 in row A). More importantly I want the other inner DIVs (1 and 3 in row A) to get centered vertically (in relation to the height of the outer DIV that has the same height as the highest inner DIV).
The contents of the DIVs are dynamic (compare row A and B) therefore I don't know which inner DIV will be the highest. Until now I used a jQuery solution that set the margin-top of the smaller DIVs (red marks) but I would like to solve it in plain CSS now.
This is easy using a flexbox - the property align-items: center produces the desired result - see a demo below:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.wrapper > div {
border: 1px solid;
}
<div class="wrapper">
<div class="one">Some text here</div>
<div class="two">
There is a lot of text here
<br>There is a lot of text here
<br>There is a lot of text here
<br>
</div>
<div class="three">Some
<br>text</div>
</div>
.outera {
border:solid 1px #333;
}
.outera div {
width:20px;
border-radius: 16px;
background-color:#212121;
margin:10px;
display:inline-block;
vertical-align: middle;
}
.outera .a1 {
height:20px;
}
.outera .a2 {
height:80px;
}
.outera .a3 {
height:50px;
}
<div class='outera'>
<div class='a1'></div>
<div class='a2'></div>
<div class='a3'></div>
</div>
You can use CSS Flexbox.
In the below snippet I've used display: inline-flex;. Have a look at the snippet below:
body {
padding: 20px;
}
.outer {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
}
.inner {}
.a .element {
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
.b .element {
width: 20px;
height: 50px;
border-radius: 50%;
background: green;
}
.c .element {
width: 20px;
height: 30px;
border-radius: 50%;
background: blue;
}
<div class="outer">
<div class="inner a">
<div class="element"></div>
</div>
<div class="inner b">
<div class="element"></div>
</div>
<div class="inner c">
<div class="element"></div>
</div>
</div>
Hope this helps!
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/
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm trying to center div's inside one outter div, but I can't.
My html is something like this :
<div class="outterDiv">
<div class="innerDivBig">
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="clear:both"/>
</div>
</div>
And my css is something like this :
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align: center;
}
.innerDivBig{
margin: 0 auto;
display:table;
}
Here is jsfiddle.
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align:center;
}
.innerDivBig{
display: inline-block;
}
https://jsfiddle.net/2a8514nf/7/
UPDATE:
https://jsfiddle.net/2a8514nf/4/
I use display: table because the browser calculates the width to fit all the child elements width display: table-cell so that you wont have to worry about the width.
I also use padding instead of margin since it does not expand the element so the parent size remains the same.
.outer {
width: 500px;
border: 1px solid #000;
padding: 15px;
margin: 0 auto;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
padding: 0 5px;
text-align: center;
}
.inner > div > div {
padding: 15px;
text-align: center;
border: 1px solid #00F;
}
<div class="outer">
<div class="inner">
<div>
<div>Inner Div 1</div>
</div>
<div>
<div>Inner Div 2</div>
</div>
<div>
<div>Inner Div 3</div>
</div>
</div>
</div>