i've got 4 columns in one row and depending on how much information i put in each of them they will have different heights. you can see that if you put a background color on them.
how do i give the other columns the height of the column with the largest height?
You can use jQuery to do this.
http://www.cssnewbie.com/equal-height-columns-with-jquery/
Alternaively for a CSS only approach you can make it look like they are the same height, by wrapping all columns in a div, and then applying a single background image, with 4 blocks of colour that match the column widths.
This wrapper div will expand to be the size of the largest column, and will give the impression of 4 equal sized cols.
Well, I don't know if this works for 960, but in Blueprint you can get that by applying the following style to the columns:
padding-bottom : 20000px;
margin-bottom : -20000px;
overflow:hidden;
You could use CSS property display: table-cell
http://jsfiddle.net/AGjBM/
<style>
div.table-cell {
display: table-cell;
border: 1px solid;
}
</style>
<div class="table-cell">
Some Text
</div>
<div class="table-cell">
Some Text<br>
Some More Text
</div>
Related
Is it necessary to add a .row in the .container-fluid block?
On bootstrap website, it say:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
I have been doing like this without .row and it work fine:
<div class="container-fluid container-fixed-lg ">
<div class="panel">
<div class="panel-body">
<table>
......
</table>
</div>
</div>
</div>
If you look at a row class in BootStrap CSS, you'll notice there's -15px of margin on both the left and right. This is to compensate for the 15px of padding a container provides. This is important if you're nesting columns within your row as the columns themselves have 15px of padding (called a "gutter" in many cases).
As BootStrap say:
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.
In other words, you should use a row if you're nesting columns, if not then there's not an absolutely essential need for them...
Your code is ok, no need to put useless div with class row if you don't use the bootstrap grid system. And obviously you aren't here.
You should check out what .row does. In bootstrap it removes the margin from the left and right side of the div (gutter). With that knowlegde you can make out if you need to use it or not. :)
I used .row many times within the .container fluid block.
I want to make an image fill a cell in a grid row. I want to use the CSS background-size: cover property to allow it to scale to fill the cell accordingly.
For example:
<div class='row'>
<div class='medium-6 columns'>
<div style='
background: url("/img/picture.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;'></div>
</div>
<div class='medium-6 columns'>
... bunch of text ...
</div>
</div>
How can I get that div in the first cell to expand to the entire cell space?
Note, I'm not using an img element since I'm trying to get the cover behaviour. If there is a way to do that using img I can do that instead.
I don't know if the answer will be Foundation specific or CSS generic. Either will do, provided it works in Foundation grids.
You can create an equal height container using a few data attributes. Apply the data-equalizer attribute to a parent container. Then apply the data-equalizer-watch attribute to each element you'd like to have an equal height. The height of data-equalizer-watch attribute will be equal to that of the tallest element.
Read more here: http://foundation.zurb.com/docs/components/equalizer.html
The issue is your background-image div has no height or width or content.
.medium-6 will afford width (as a percentage), but not height. If you want the background-image div to be of the same height as the "bunch of text" div, you should use the Zurb Block Grid, which is similar but uses display: inline-block; so each sibling inherits the greatest height.
You could also use display: table-cell on "bunch a text" and "background image" and display: table-row on .row.
I have this design layout that has a gradient background in the content container.
the gradient is a solid color on the left and right and gradient to white near the center. (horizontal gradient)
I have three images left-solid.png and a right-solid.png for extending the left and right of the content area if the viewing area is larger. I have main-gradient.png as the background for the main content and is a fixed size of 900px
Is there a way to lay this out without using a html table?
It looks like I need three columns of some sort
[leftcolumn][contentcolumn][rightcolumn]
rightcontent= can stretch and filled with right-solid.png repeat-x
content = 900px filled with main-gradient.png as background no repeat
leftcontent = canstrech and filled with left-solid.png repeat-y
any suggestions?
There are a number of ways you can achieve a multi-column layout without using tables. In fact, using tables is semantically incorrect. This very thing is one of the reasons CSS was created.
Using the following HTML structure:
<div class="container">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
Then you could do this in CSS:
.left, .middle, .right {
display: inline-block;
}
This will tell the div's to appear next to each other. Additional CSS styles will be needed as well, like width properties for each column (preferable to use percents).
Another option for CSS would be:
.left, .middle, .right {
float: left;
}
This will also tell the div's to appear next to each other, but it does it a very different way.
A further note is that you don't need to use images for your gradient. You can do gradients using CSS. Take a look at http://www.colorzilla.com
I have two div-columns of different height which I like to have the same height. I achieved this using the padding-margin hack with the following css for my div-columns:
.lane1 {
padding-bottom: 800px;
margin-bottom: -800px;
}
The html is displaying a flow-diagram. I would like to have a line from the end of each lane to the bottom of the two-lane part to have a continuous diagram.
I tried to achieve this with an additional div with class .LineFilling that is a line going down, but I don't know how heigh the line should be. So I put
position: absolute;
overflow: hidden;
in the .lane1-class and made the .LineFilling-element of height 600px, but that doesn't work, since the overflow is displayed. Is there a way to have the .LineFilling-element extend to the end of the lane? Or extend further but the overflow being cut?
Thanks for help.
EDIT: I posted the code online here: Click here to see code
Yes it is possible with pure css.
I have used display table-row and table-cell properties to achieve it.
HTML:
<div class="parent">
<div class="child">
<p>line 1</p>
</div>
<div class="child">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</div>
CSS:
.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}
See fiddle.
Update: probable solution DEMO
Pure CSS solution
Here is a DEMO of that solution.
In this DEMO, you see multipple Rows,
each Row can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder, and can have any number of Elements you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3 Rows.
The First Row has the starting point, so no stretch needed there.
The Second Row has 3 ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row has 2 ElementsHolder, behave as expected.
notice that the stretching works regardless of the Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;,
Each row has ElementsHolders that gets equal width.
each one of those ElementsHolder is also a flex box, but this time his direction is opposite (flex-direction: column;).
the child's of ElementsHolder are Elements & Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the flex property with the appropriate values.
More about the flex-model can be found HERE
I don't know if I really understand what you need. I've tried the following
Adding a new absolute element in the laneContainer with height: 100%
#straightLine {
background-color: #FFBF80;
height: 100%;
left: 104px;
position: absolute;
width: 3px;
z-index: 5;
}
Plus some small modifications to some other objects, you'll find them in the fiddle...
http://jsfiddle.net/RRupc/9/
Is something like that what you want?
Rather than adding another div to fill the space, wouldn't it be easier to add a class to the div on the left column, and style that to fill any spacing/line requirements you have?
So you could have:
HTML:
<div class="twoColumn">
<div class="column">
<div class="step doubleRow">
<p>One step covering two rows here</p>
</div>
</div>
<div class="column">
<div class="step">
<p>Single size step</p>
</div>
<div class="step">
<p>Single size step</p>
</div>
</div>
</div>
have you seen these 2 plugins?
jQuery Isotope
jQuery Mansonry
Eventually there is a solution for you!?
Take a look.
FlexBox could be worth a look too.
if you are ok with IE10 +
Auto Align Heights (CSS)
align-items: stretch
Good Reads here and here
Cheers,
Rob
I've attached a screenshot with this question. There are three columns and I want to keep the height of all the three columns exactly same. I managed to keep the width same with width css property now i wanted to adjust to height. Can anyone help me out in this regard. Thanks in advance.
I would use the following CSS to achieve this:
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
}
With table-layout: fixed you're telling every child elements with display: table-cell to have same width, equally distributed based on wrapper's width, as well equal height.
Demo
In pure CSS you can use CSS3 columns: for a 3-column layout just try with
<div style="columns:3">...</div>
(with both -moz- and -webkit- prefixes)
See https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts for the reference, in particular about the height balancing:
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
There is actually no right, cross browser way to do this, but rather you have to resort to some hacks.
A method I have used previously is to wrap the three columns inside a container and set a custom background to the hole container. Basically you create an image, having the same width of the website, having the two vertical lines, and you set it as the background of the container.
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style> .wrapper { background-image: url(wrapper-bg.png); } </style>
You could use a javascript library like http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200 to achive this. This method however does not work if, the hight of the columns is dinamically changing in height (e.g. you have a collapsable item in it). Of course you can handle this cases by handling those events and recalculating the hight.
Finally you could use height: 100%. It's not as simple as it seems however! This solution does only work for block elements and the size of the parent has to be known. So, if you know the size of the website in advance you can do something like the following:
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style>
.wrapper { height: 1000px; width:900px; }
.column { width:300px; float:left; height: 100%; }
</style>
Hopefully this will become simpler in future....