Using Bootstrap 3 I have styled the .row class to be a height of 3.5em.
I have several inputs in the row. They align to the top of the row and I would like to get them bottom aligned.
I have tried a style of vertical-align:bottom but that does not seem to work.
The reason I want to have things bottom aligned is that I have a floating label that I have popping up above the input field.
Any suggestion on how to accomplish a bottom align?
EDIT
Maybe i misunderstood what your want to do.
If you want to vertical align the content of your row, you can use that solution :
.row-bottom-align {
display: table;
table-layout: fixed;
}
.row-bottom-align > div {
display: table-cell;
float: none;
vertical-align: bottom;
}
And add row-bottom-align to your row.
See it in action : http://jsfiddle.net/G5e3e/
======
ORIGINAL ANSWER
Here is a way to have your columns with the same height.
(you can also have the same render with the above solution by setting vertical align to "top", but here is another way to do that with margin/padding)
.row-same-height {
overflow: hidden;
}
.row-same-height > div {
margin-bottom: -2000px !important;
padding-bottom: 2000px !important;
}
Just add row-same-height class to your row
<div class="row row-same-height"></div>
Look it in action : http://jsfiddle.net/Cxa2m/
Related
Could someone please help me?
I have three divs.
enter code here
The one in the middle should always be 1040px.
The left and right one shall fill the whole left space.
How can I make them proportionally grow/shrink when I resize the window?
Here is the code:
http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d
Thank you very much in advance!
Here is a pure CSS option using CSS display properties of table and table-cell.
DEMO: http://jsfiddle.net/audetwebdesign/a9J7D/
The markup is the same as you proposed.
The CSS is:
.container {
width: 100%;
min-width: 540px; /* you may want this... */
margin: 0 auto;
outline: 1px dashed blue;
display: table;
}
.bar-light {
width: auto;
height: 52px;
background-color: blue;
display: table-cell;
}
.bar-dark {
width: 540px;
height: 52px;
background-color: red;
display: table-cell;
}
Set display: table to .container and for the child elements, display: table-cell.
For .bar-light, set the width to auto and they will be computed to fill in the remainder of the page width (equally).
In my example, I set the center width to 540px to make it easier to see in the fiddle.
Finally, add a min-width to .container, without any content, the table cells will collapse to zero width as you shrink the window size.
Note About Heights
This layout will create three columns of equal height, the height will be computed to enclose the tallest of the three child elements.
This is real quick so it might be slightly off but you should be able to get the idea
HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
CSS
div { float: left;}
.b { width: 1040px;}
JQuery
$(document).onload(resize);
$(window).resize(resize);
function resize() {
var ww = $(window).width();
var width = (ww-1040)/2;
$('.a').width(width);
$('.b').width(width);
}
Add a table with 3 column. In the middle column add you div. specify the size you want for this for these column e.g. 10-80-10. or -80-.
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I'm trying to build the liquid layout shown below in CSS.
The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.
I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/
But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.
The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).
I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/
Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.
div.NomeEvento {
text-align: left;
float: left;
width: 75%;
background-color: #eee;
}
div.DataEvento {
text-align: left;
margin-left: 5%;
width: 20%;
float:left;
background-color: #ccc;
}
It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:
div.Evento {
overflow: hidden;
margin-top: 10px;
}
div.NomeEvento {
background: #eee;
padding-right: 20%; /* the same as the right column width */
}
div.DataEvento {
float:right;
background: #ddd;
}
...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:
<div class="Evento">
<div class="DataEvento">#evento.Data</div>
<div class="NomeEvento">#evento.Nome</div>
</div>
Check it: http://jsfiddle.net/J89Hp/
Cheers
I acomplished what I want using display table, table row and table cell in my divs.
Take a look. It's exactily what I want.
http://jsfiddle.net/tcWCC/47/embedded/result/
I have an empty page with one DIV on it:
<div style="height: 20%;
min-height: 10px;
max-height: 100px;
width: 100%;
background-color: blue;"></div>
I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?
I've spent all day on this and CSS is starting to drive me crazy.
What has to be inside this div?
If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?
It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.
EDIT:
code example:
http://jsbin.com/efefe/2
Assuming you have two divs:
<div id='one'></div>
<div id='two'></div>
where #one has variable height and #two should consume all remaining vertical space you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#one {
flex: none;
}
#two {
flex: 1;
}
Furthermore, if you want #two to be scrollable you can add:
height: 100%;
overflow-y: scroll;
which will allow it to scroll vertically to show it's whole contents.
You can read more about display:flex here.
I want to use overflow on a div to show all div and image, and text to but for this example i used only images.
i need a horizontal scroll, if i only use image its work well with the white-space: nowrap; css but if each images are in a div the sroll disapear and images don't show all.
Example 3 here
the first exemple work if i give a width to a wrapping all div but i can do this methode since all the div are called dynamicaly, it's mean that i can got 1 div to hundred one.
Here the code of the 3rd example
#dmcscroll2 {
white-space: nowrap; display:
block; width:660px;
height:112px;
overflow: auto;
overflow-y: hidden;
/*overflow :
-moz-scrollbars-horizontal;*/
border-style:solid;
border-width:1px;
border-color:#000;
}
.div-image{
float: left;
width: 125px;
}
how can i do for the 3rd technique without knowing the number of div with images a will get from a dynamic javascript call.
You may look at the source code to see more in detail
You can remove the float:left from .div-image CSS and add display: inline instead:
.div-image{
display: inline;
width: 125px;
}
That seems to work the way you wanted it to on your example website.