I have some DIVs on a page. How can I make the DIVs create a new column on the right when the bottom of the page is reached. So I have some small fixed height DIVs with images inside them. After every DIV, there is a line and then the next div and so on. On smaller displays, the screen requires scrolling to see the DIVs. So I added overflow: hidden to the body, to disable the scrolling. Now the DIVs at the very bottom are cut out, so I want the DIVs that are cut out, to create a new column to the right.
Example: .
body {
overflow: hidden;}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
There's a lot of solutions to this and all run into polyfill issues. Columns are notorious for this.
A good option with decent coverage is to use flexboxes. Flexboxes were pretty much made for this kind of stuff.
Wrap all the divs in another div (i used section) and give the wrapping container some flexbox rules:
body {
overflow: hidden;}
.wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh; /*the height will need to be customized*/
width: 50px;
}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
margin-left: 10px;
}
<section class="wrap">
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
</section>
You'll need to give height and width rules to the wrapper, however. If it's in another container with a set height, you should be able to give it height: 100% and it will reach the bottom of the page.
Word of warning: columns and flexboxes are notorious for having cross-browser compatability issues, though mobile browsers are somewhat better at this. A good solution is to use a library with a focus on responsive or mobile design, like Bootstrap or SpaceBase (though the latter is a SASS library)
#samuel-denty are you looking for CSS Columns ?
here is jsfiddle: https://jsfiddle.net/zk7578vj/
try using class (.) icon instead of id (#) on css, like this:
body {
overflow: hidden;
-webkit-columns: 50px 2;
-moz-columns: 50px 2;
columns: 50px 2;
}
.icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div class="icon">1</div><br>
<div class="icon">2</div><br>
<div class="icon">3</div><br>
<div class="icon">4</div><br>
<div class="icon">5</div><br>
<div class="icon">6</div><br>
<div class="icon">7</div><br>
<div class="icon">8</div><br>
<div class="icon">9</div>
</body>
Related
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.
Here is the jsfiddle.
The html:
<div class="header">
<div class="logo">logo</div>
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
The css:
.header {
text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
max-width: 300px;
min-width: 100px;
width: 100%; /* It is always the min-width without this*/
background-color: red;
display: inline-block;
float: left;
}
.link {
display: inline-block;
background-color: green;
}
I hope I was clear, I'm still learning. Let me know if I need to add any more details.
I went looking some more and found flexboxes. Got them to do exactly what I wanted.
http://jsfiddle.net/3525C/10/
My new HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
and CSS:
.header {
text-align: center;
display: flex;
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 1 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
Thanks hexalys for helping me get it working.
The only real thing that responds the way you're talking is a table. Table cells have the capability of being flexible with their width.
You can use CSS to make this happen. It's a more modern display, so not all browsers (looking at you, older IE) will support it. But this should get you started: http://jsfiddle.net/mfvf8/
Here's what I added as a proof of concept:
.header
{
display: table;
width: 100%;
}
.header > div
{
display: table-cell;
}
.header .link
{
white-space: nowrap;
width: 1px;
}
I set the header to be displayed as a table, and gave it full width. I made all of the child divs act like a table cell. I made the links minimum width (1px) and said not to wrap whitespace. With regular divs, that would overflow. With table cells, that means it tries to be 1px wide but will expand to fit its content.
The rest of a table row's width will go evenly to whichever cells are left over that don't have a set width. In this case, it's the logo div. Then, as you shrink the window, it will slowly start to shrink the logo as needed.
You will need to tweak this to fit your design better. If you don't want your nav pushed all the way to the right like it is in the jsfiddle, you might need a "buffer" div to the far right, or different width settings, or a set max-width on the header div.
I have DIV with flexible width set e.g. min-width:800px and max-width:1400px. In this DIV, there are many boxes with fix width 200px and display:inline-block. So depending on parent DIV width, these boxes fill the entire space.
My problem is the blank space on the right side which is caused by variable width of the parent div. Sometimes this blank space is small and looks fine, but with different widths of the parent div, this blank space is almost 200px.
I don't know, if I described my problem in enough detail, I hope this picture will help to describe my actual situation:
And this is what I would like to have:
This auto-margin could be easily achieved by using TABLE. However, I don't know the exact number of columns, since it depends on user's screen resolution. So I can't use table and rather stick with CSS.
Anyone has an idea how to solve this ? Thank you in advance for your comments and answers.
EDIT: I don't need support of IE6. I would like to support IE7, but IE7 is optional as I know there are limitations so I will probably use fixed width of "div.wrapper" in IE7
EDIT2 I need to handle multiple rows of these boxes, so they don't exceed the "div.wrapper" box and wrap correctly in multiple lines of boxes, not just in one long line.
EDIT3 I don't know the number of "columns" as this is very variable depending on user's screen resolution. So on big screen there could be 7 boxes in one row, and on small screens there could be just 4 boxes in one row. So I need solution that doesn't set fixed number of boxes in one row. Instead, when the boxes don't fit in one row, they should just wrap to a next row.
This is as close as IE7-compatible CSS can get: http://jsfiddle.net/thirtydot/79mFr/
If this still isn't right, it's time to look at using JavaScript and hopefully also jQuery. If you define your requirements properly, it should be trivial to get this perfect with JavaScript.
HTML:
<div id="container">
<div></div>
<div></div>
..
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 800px;
max-width: 1400px
}
#container > div {
margin-top: 16px;
border: 1px dashed #f0f;
width: 200px;
height: 200px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
The extra span (.stretch) can be replaced with :after.
This still works in all the same browsers as the above solution. :after doesn't work in IE6/7, but they're using distribute-all-lines anyway, so it doesn't matter.
See: http://jsfiddle.net/thirtydot/79mFr/2/
There's a minor downside to :after: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.
Specifically, this doesn't work:
<div id="container">
<div></div>
<div></div>
</div>
And this does:
<div id="container">
<div></div>
<div></div></div>
You need to make .box inline-blocks, and justify text in .wrapper. .wraper:after is needed to justify the last line. Older IEs don't understand after, but in IE text-align-last:center will take care of the last line.
.wrapper{
text-align:justify;
max-width:1400px;
min-width:800px;
text-align-last:center;
}
.wrapper:after{
content:'';
display:inline-block;
width:100%;
height:0;
font-size:0;
line-height:0;
}
.box{
display:inline-block;
*display:inline;
vertical-align:top;
width:200px;
height:50px;
background:red;
}
Here's a jsfiddle.
You can float them and just apply a wrapper to the .box which will allow you to margin:auto; the .box relative to the floated wrapper.
CSS:
div.wrapper {
width:100%;
border:3px solid red;
}
div.clear {
clear:both;
}
div.box-wrapper {
float:left;
margin:10px 0;
height:100px;
width:20%;
}
div.box {
border:1px solid black;
width:80px;
height:100px;
margin:auto;
}
HTML:
<div class="wrapper">
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="box-wrapper"><div class="box"></div></div>
<div class="clear"></div>
</div>
Demo: http://jsfiddle.net/2avwf/
I didn't make them 200px wide for the sake of the fiddle window. Just swap that width:80px out with the width you desire.
If you want to make this a dynamic solution, in which the number of boxes in a row will vary from user to user based off their screen size, etc., simply make 3 or 4 width-defining box-wrapper classes:
.box-wrapper-25 {
width:25%;
}
.box-wrapper-33 {
width:33%;
}
Then with JQuery you can easily detect the width of .wrapper and assign an override class to the box wrappers:
$('.box-wrapper').each(function(){
$(this).removeClass().addClass('box-wrapper box-wrapper-25'); // only need 4 per row
});
Something like this: http://jsfiddle.net/RcDky/
Try this jsFiddle: http://jsfiddle.net/MKuxm/
Just make the window larger and smaller to size the div, you'll see that the margin between the red boxes will size accordingly. I am aware that the red boxes are no longer 200px wide, but I'm afraid that isn't possible with pure css because you should not mix percentage widths and fixed pixel width.
HTML
<div>
<span>TEXT</span>
<span>TEXT</span>
<span>TEXT</span>
<span>TEXT</span>
</div>
CSS
div {
width: 95%;
}
span {
float: left;
background: red;
width: 20%;
margin-left: 2.5%;
margin-right: 2.5%;
}
I answered a similar question here
This is possible in pure css3 using media queries and the css calc() routine.
Of coarse this will only work on modern browsers. IE9+,Chrome,Firefox,
See this WORKING DEMO
The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).
On my project I have faced with the same problem and I came to the next decision - the best way for me is to go with js, in my case you can have xxx count of block inside container, if there is enough space in 1st row the block from 2nd row goes up to the 1st row, and so on.
here is an example http://jsfiddle.net/gVAjN/11/
$(function() {
// Call function when DOM is ready
settingsAlignment();
$(window).resize(function() {
// Call function on window resize
settingsAlignment();
})
$('#new_div').click(function() {
box_number = $('.element').size();
box_add = box_number + 1;
$('.container').append($('<div class="element">Box'+ box_add + '</div>'))
settingsAlignment();
})
function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
settingsLi = $('.element');
ul_width = settingsUl.outerWidth(true);
item_width = settingsLi.width();
min_gap = 7;
effective_item_width = item_width + min_gap;
items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
gaps_sum = ul_width - items_in_row * item_width;
new_gaps = gaps_sum / (items_in_row + 1);
item_margin = Math.floor(new_gaps);
row_width = (item_width + item_margin) * items_in_row - item_margin;
console.log(row_width + '= row_width');
console.log(ul_width + '= ul_width');
ul_left_padding = Math.ceil((ul_width - row_width) / 2);
console.log(ul_left_padding + '=ul_left_padding');
settingsUl.css('padding-left', ul_left_padding + 'px');
settingsLi.css('margin-right', item_margin + 'px');
console.log(settingsLi);
}
});
quite old but worth trying since multiple rows and text-align: justify; in the #container creates gaps when last row has less divs. I wanted everything to be floated left. So my idea was to use 2 wrappers.
<div class="wrapper">
<div class="wrapper2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
</div>
as well as overflow: hidden; in css
.wrapper {
width:620px;
border:3px solid red;
margin:0 auto; overflow:hidden;
}
.wrapper2 {
width:630px;
}
div.clear {
clear:both;
}
.box {
width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}
drawback: margins are not auto set...
DEMO: http://jsfiddle.net/hexagon13/2avwf/52/
Try this:
div.wrapper {
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
justify-content: space-between;
/* justify-content will give the auto margin you looking for
it will place the auto margin only between each div.box
make sure the div.wrapper has "display: flex;"
*/
}
div.box {
display: inline-flex; /* inline-flex will make the boxes all in the same line */
width: 200px; /* notice you don't need width to be a % for this to work */
height: 100%;
margin: auto; /* gives you the auto margin for the first and last box from the border of your wrapper */
}
I want to have a horizontal scrollbar if necessary, by having the 'child' divs be added side-by-size instead of getting pushed to the next row when the parent isn't wide enough.
My code is below. If you set .mid to have width: 1000px you'll see what I'm going for, only I only want it to be as wide as the dynamically generated children.
<html>
<head>
<style type="text/css">
.parent {
width: 400px;
background-color: #666;
overflow:scroll; /* cater to the older browsers */
overflow-y:hidden; /* Hide vertical*/
}
.mid {
background-color: red;
}
.child {
display:inline-block;
background-color: #ccc;
border: 1px solid black;
width: 190px;
}
</style>
</head>
<body>
<div class="parent">
<div class="mid">
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
</div>
</div>
</body>
</html>
Heck, might as well answer this. You're going to need Javascript for this, but given that you already use that to dynamically generate the child elements, it shouldn't really be a problem.
Assuming you're using jQuery, add these two lines after you generate the element:
var child = $('child');
$('.mid').width(child.length * child.outerWidth(true));
Sorry about the miscommunication
Using this, however, will create another problem. When you use display: inline-block, a whitespace added behind each div, so jQuery cannot get the correct width. This wouldn't happen if you use float: left instead though.
People have been here before and found the best / easiest way to do this. Look here:
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
You could try and use overflow:auto
How to size a div's height to its container height, using CSS ?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
You can either:
use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers
or
write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere
Your pick :)
There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.
This will work regardless of if the container's height is specified in CSS or not.
I know this was answered forever ago, but when I run into this issue nowadays, I use Flex Box. It's awesome. See A Complete Guide to Flexbox by Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}
<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.
It seems like you are trying to get equal height columns. You could use the fauxcolumns method where a background image is used to fake the equal height. There are other methods out there.
You can tell the container div to display as table and have the inner div to display as a table cell.
The HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
The CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Fixes for IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones.
If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piece contains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.
The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).
Sample code, you need to start from the html element so you can make use of the flexible height in the containers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.
The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.
.container{padding-top:100px;padding-bottom:50px}header
i use the overflow:hidden it work properly.
.bu {
overflow: hidden;
background-color:blue;
}
<div class="bu">
<button>english</button>
</div>
try adding this to the div to be resized
.layout-fill {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
I did something similar to KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
This goes through every row in a div "table" and makes the heights all match, as long as the divs are classed accordingly.