I have a basic grid system, really basic, which puts to 'cells' side by side in a fluid 'row'. I want the two cells to always match their height so they are equal. So if one has more content than the other, the other expands to match the height of the cell with more content.
<div class="row">
<div class="cell1">
<div class="inner">
<h2>Cell 1</h2>
<p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>
</div>
</div>
<div class="cell2">
<div class="inner">
<h2>Cell 2</h2>
</div>
</div>
</div>
Demo of the problem here: http://jsfiddle.net/QDBff/
If you absolutly must avoid using TABLEs, you can style your divs to behave like tables with
display: table;
display: table-row;
display: table-cell;
You can look at the markup/css and results in this fiddle: http://jsfiddle.net/aeinbu/QDBff/35/
I made it work here with the use of jQuery: http://jsfiddle.net/QDBff/10/
$(document).ready(function() {
var height1 = $('.cell1 > .inner').height();
var height2 = $('.cell2 > .inner').height();
if (height1 < height2) {
$('.cell1 > .inner').height(height2);
} else {
$('.cell2 > .inner').height(height1);
}
});
<table><tr><td>Cel 1</td><td>Cel 2</td></tr></table>
I've checked your fiddle and I think it may be fixed by adding a min-height of 270px (for ex. only).
I am not a jsfiddle user, but look at my screen shot below...
Note:
You just have to tweak your min-height to fit your needs. Tweak is necessary whenever the text size increases or decreases.
But, if your content is dynamic, this is not a permanent solution.
Add a large padding bottom and an equal negative margin bottom to your cells and stick overflow: hidden onto your row.
.cell {
width: 50%;
background: #eee;
float: left;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
.cell:nth-child(odd) { background: #ddd; }
.row { overflow: hidden; }
.row:after {
content: "";
clear: both;
display: table;
}
Example here:
http://jsfiddle.net/Q9U6g/1/
you can achieve this by using
display: table
and
display: table-cell
I have modified your jsfiddle - http://jsfiddle.net/Raver0124/QDBff/36/
Also another jsfiddle that i created previously - http://jsfiddle.net/jBMBR/6/
Change the border from Inner class to Cell1 and Cell2 classes. Then give fixed height to the Cell1 and Cell2 classes.
.cell1 {
width: 45%;
margin-right: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}
.cell2 {
width: 45%;
margin-left: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}
Here is the fiddle
http://jsfiddle.net/QDBff/31/
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
There are much answers answers uning float or overflow: hidden or display: inline-block, but they are not appliable for my problem, because of they all affect div width. So, please, avoid this answers and duplicate-marks.
here is my current page:
.scrollableWrapper {
overflow: auto;/*so if any of width changes apply, this won't work*/
}
.left {
width: 30%;
float: left;
}
.right {
width: 70%;
float: right;
}
.all {
border: 2px solid black;/*for visibility while developing*/
width: 80%;
overflow: hidden;
}
<div class="all">
<div class="left">
название
</div>
<div class="right">
<div class="scrollableWrapper"><label>tezrnjetgnd;sngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklg</label></div>
<div>
edit
</div>
</div>
</div>
And i need the edit text to be right afres scrollable, on the same line. Margin doesn't work.
P.S. I prefer to do it without recalculating width using jquery, but I know that it is possible (edit div has constant widht)
check if this working fiddel will help you
in your case : https://jsfiddle.net/24ks85ue/1/
just change the div location and add float left for edit div class
I'm trying to make fixed header that is splited in 3 parts on horizontal. The central part have 1000px width, other 2 parts have equal sizes with auto width. Also the left part have an image with an edge glued to the central part. I have tried a couple of solutions, however i accomplished this only by using tables. Can anyone help me with this?
You can make that using divs, displayed as table-cell.
HTML:
<div class="header">
<div class="l">l</div>
<div class="m">m</div>
<div class="r">r</div>
</div>
CSS:
.header {
display: table;
width: 100%;
table-layout: fixed;
}
.header > div {
display: table-cell;
}
.l {
background: lightblue;
}
.m {
background: lightgreen;
width: 500px;
}
.r {
background: lightblue;
}
Also check the demo.
I would restrict the use of tables to tabular data. Based on your description, I think this will work for you. What you are doing is setting a fixed width to your middle column and setting the width of the end columns to 50% and then setting a negative margin on each to half of the width of the center column. The CSS could be a little more efficient.
http://jsfiddle.net/CLRxq/1/
HTML
<div class="wrapper">
<div class="left">Add Image here</div>
<div class="center"> </div>
<div class="right"> </div>
</div>
CSS
.wrapper {
overflow: hidden;
}
.center {
float: left;
width: 1000px;
background: red;
}
.right {
float: right;
width: 50%;
background: green;
margin-right: -500px;
}
.left {
float: left;
width: 50%;
background: blue;
margin-left: -500px;
text-align: right;
}
You can do it with tables or divs, it's up do you, though, for flexibility and consistency I recommend doing it on divs.
Table:
<table width="1200" height="100">
<tbody>
<tr>
<td></td>
<td width="1000"></td>
<td></td>
</tr>
</tbody>
</table>
Div:
Go here, the center div is the big one, side div are the others, don't remove the clear div, it is only a float fix for the html. Just change the CSS accordingly to what you want.
http://jsfiddle.net/EsQak/
Please take a look at this jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/#base
I would like <div class="client"> to "inherit" <div class="contact">'s height (Both inner div's to have the same size)
Keep in mind that the content on both <div class="client"> or <div class="contact"> will dynamically change. So, there's no way to know a predefined height. HOWEVER, <div class="client"> will always have 2 or 3 lines.
HTML
<div id="conteiner">
<div class="client">Name: <br/>Phone:<br/>Emergency</div>
<div class="contact">
Contact 1<br/>
Contact 2<br/>
Contact 3<br/>
Contact 4<br/>
Contact 5<br/>
Contact 6<br/>
Contact 7<br/>
Contact 8<br/>
</div>
</div>
CSS
#conteiner {position: relative;}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
=== EDIT (07/12/2012) ===
Final jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/
Thank you #christofer-vilander !!!
Just this once, I'd recommend using <table> as you are in fact making a table. :)
How about using display: table; and display: table-cell; and make them behave like table elements?
Something like this - demo
If I am not wrong, then you want client div and contact div height should be same one.
Please use below code for the same :-
$(document).ready(function(){
$('.client').height($('.contact').height());
});
Please check and let me know in case of any help or concern.
Regards,
Durgaprasad
height:100%; only works when the parent element has a set height. You can do something like this: http://jsfiddle.net/TpWNY/2/
#conteiner {
position: relative;
height:200px; // set height of container.
}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
overflow:auto; // allow the div to scroll if necessary.
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!
The most straight-forward (and I would say correct) way is to use display: table:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
color: white;
}
#left {
background: blue;
width: 300px;
}
#right {
background: red;
}
<section id="wrapper">
<aside id="left">Left 300px</aside>
<div id="right">Right the rest</div>
</section>
http://jsfiddle.net/YbLZE/1/
Try resizing the bottom right frame.
Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...
This is the working example:
http://jsfiddle.net/tnm62/
Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.
One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:
HTML:
<div class = "left">
Glee is awesome!
</div>
<div class = "right">
Glee is awesome!
</div>
CSS:
.left {
width: 300px;
float: left;
}
.right {
overflow: hidden;
}
And a little demo: little link.
Here's something for newer browsers (not IE):
CSS:
#container {
display: box;
}
#left {
width: 400px;
}
#right {
box-flex: 1;
}
HTML:
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
Demo: http://jsfiddle.net/N5zhH/1/
This should be sufficient:
<div style="overflow: hidden;">
<div style="width: 300px; float: left;"></div>
<div style="margin-left: 300px;"></div>
</div>
overflow: hidden will stretch the container div to accommodate the tallest child element
float: left floats the element left (doh!)
width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div
Tip: change to margin-left: 320px to add a 20px gutter
Here is a nice little DEMO