I'm attempting to have a horizontally-scrolling (left-to-right) DIV in a dynamic width table cell (DIVs with display:table-cell). The scrolling DIV should be allowed to take up 100% of the containing element without causing it to grow beyond all ancestors' widths. I'd prefer to have a pure markup/CSS fix to this problem, without JavaScript or static widths.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>
#page
{
width: 100%;
max-width: 500px;
}
.tcell
{
display: table-cell;
min-width: 150px;
padding: 10px;
}
#scrollbox
{
width: 100%;
height: 90px;
background-color: red;
overflow: auto;
}
#scrollcontent
{
background-color: green;
width: 900px;
height: 50px;
margin: 10px;
white-space: nowrap;
}
</style>
</head>
<body style="width:100%;">
<div id="page">
<div class="tcell" style="background-color: teal;">Hello world</div>
<div class="tcell" style="background-color: yellow;">
<div id="scrollbox">
<div id="scrollcontent"></div>
</div>
</div>
</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/L69qJ/
The issue is visible in IE8, Chrome, Firefox, and Safari.
In this example, the yellow div is being forced to grow beyond it's container (we expect the entire page to be no larger than 500px. See the max-width style for #page) because the red DIV isn't respecting overflow:auto and therefore trying to expand to show the green DIV completely.
Expected behavior: I'd like for the teal and yellow cells to add up to 100% of their parent (#page). The green cell is so wide that it's making the red cell expand, which is making the yellow cell expand. It's expected that the red cell use a horizontal (left-to-right) scrollbar instead of making the yellow cell expand.
display:table;
table-layout:fixed;
to #page.
There it is:
http://jsfiddle.net/L69qJ/8/
To answer your question, the problem is that you are using table-cells. Table cells inherently take the shape of their children, so if you set something wide inside of a table cell, you can't just add a width to the table cell and expect it to follow that rule. You need to transition to using percentage width inline divs, or floats to achieve your layout.
Related
I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.
An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.
In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.
JSFiddle code to try in both Chrome and Firefox
HTML as follows:
<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}
#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}
table{
height:100%;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>
EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.
Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:
To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:
.fix {
height: 80px;
display: block;
}
WORKING JSFIDDLE DEMO
Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.
#inner {
border: 2px solid red;
height: 75px;
overflow: auto;
width: 300px;
}
You can use this CSS. I think it may work fine.
I have the following simple HTML and CSS:
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>
I load this page in a browser. If the width of the browser is 400px (just an example), then I see a horizontal scroll bar in the browser screen bottom. If I move the scroll bar to the right, I can see that the background of the second div does not extend to the right.
I hope that the background color of the second div can extend from browser's left edge to the right edge (no matter what the width of the browser is).
How can I fix this?
Thanks!
You can solve like this:
<div style="width: 970px">
<div>Text area</div>
<div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>
Whenever an element's explicitly set width is larger than the width of the body, the element overflows the body's boundaries. In other words, the browser will not adjust the width of the body, thereby restructuring an entire page layout, because one element spills over.
One solution is to make the div that follows the first div overflow as well.
Here's HTML:
<body>
<div>Text area</div>
<div></div>
</body>
CSS:
body > div:first-of-type {
width: 970px;
outline: 1px solid red;
}
body > div:last-of-type {
width: 100%;
height: 20px;
background-color: gray;
}
#media screen and (max-width: 970px) {
body > div:nth-of-type(2) {
width: 970px;
}
}
And, here's a fiddle: http://jsfiddle.net/8mK7f/.
I would suggest making sure the browser default CSS isn't interfering by using a CSS reset. http://meyerweb.com/eric/tools/css/reset/
This is because the body tag's width is the width of your browser window, and the 100% width on the second div is taking the width of the parent, which is the body tag. In your example this means the second div will only ever be 400px (the width of the browser window).
You'll have to set the width of the body tag to also be 970px in order for this to work. Setting body to 100% width won't solve it, because that will take 100% of it's parent width which is the html tag and will still be the width of the browser window.
<body style="width: 970px;">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
EDIT: An alternative is to set the body to have display: inline-block which will force it to expand to the width of it's children:
<body style="display:inline-block">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
When you use percentages in CSS, it only extends to the % of the parent element. In this example, make sure that the body element is 100% width as well.
Best of luck :)
Since you are hard coding the widths why not just set the width of the gray bar to the same as the div >Text Area< ?
e.g
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I want a container with two columns. Details:
The container
Width should adjust to 100% of its parent element (easily accomplished).
Height must adjust to contain both columns (i.e. its height should be exactly equal to the larger height of the two columns, so there is no overflow and scrollbars never show)
Should have a minimum size equal to double the width of the left column.
The columns in general
Should be of variable height, adjusting to the height of their content.
Should be side-by-side, such that their top edges are in line.
Should not break the layout or wrap under each other if even a single pixel of border, padding, or margin is applied to either one, because that would be extremely unstable and unfortunate.
The left column specifically
Must have a fixed, absolute width in pixel units.
The right column specifically
Width must fill the remaining space in the container. In other words...
Width must equal the container width minus the width of the left column, such that if I place a DIV block element inside this column, set its width to 100%, give it a height of something like 10px, and give it a background color, I will see a 10px high colored strip that goes from the right edge of the left column to the right edge of the container (i.e. it fills the right column's width).
Required stability
The container should be able to resize (by resizing the browser window) down to its minimum width (specified earlier) or to a much larger width without breaking the layout. "Breaking" would include the left column changing size at all (remember it's supposed to have a fixed pixel width), the right column wrapping under the left one, scrollbars appearing, block elements in the right column failing to take up the entire column width, and in general any of the aforementioned specifications failing to remain true.
Background
If floating elements are used, there should be no chance that the right column will wrap under the left one, that the container will fail to contain both columns (by clipping any part of the column or allowing any part of the columns to overflow its boundary), or that scrollbars will appear (so I'd be weary of suggesting the use of anything other than overflow:hidden to trigger floating-element containment). Applying borders to the columns should not break the layout. The content of the columns, especially of the right column, should not break the layout.
There seems to be a simple table-based solution to this, but under every circumstance it fails miserably. For example, in Safari, my fixed-width left column will shrink if the container gets too small, rather than maintaining the width I specified. It also seems to be the case that CSS width, when applied to a TD element refers to a minimum width, such that if something larger is placed inside it, it will expand. I've tried using table-layout:fixed; doesn't help. I've also seen the case where the TD element representing the right column will not expand to fill the remaining area, or it will appear to (for example a third column 1px wide will be pushed all the way to the right side), but putting a border around the right column will show that it's only as wide as its inline content, and block-level elements with their width set to 100% do not fill the width of the column, but rather match the width of the inline-content (i.e. the width of the TD seems to be completely dependent on the content).
One potential solution I have seen is too complex; the solution needs to work in IE8, Firefox 4, and Safari 5.
Here you go:
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
See it in action here: http://jsfiddle.net/FVLMX/
Try this: Live Demo
display: table is surprisingly good. Once you don't care about IE7, you're free to use it. It doesn't really have any of the usual downsides of <table>.
CSS:
#container {
background: #ccc;
display: table
}
#left, #right {
display: table-cell
}
#left {
width: 150px;
background: #f0f;
border: 5px dotted blue;
}
#right {
background: #aaa;
border: 3px solid #000
}
Piece of cake.
Use 960Grids Go to the automatic layout builder and make a two column, fluid design. Build a left column to the width of grids that works....this is the only challenge using grids and it's very easy once you read a tutorial. In a nutshell, each column in a grid is a certain width, and you set the amount of columns you want to use. To get a column that's exactly a certain width, you have to adjust your math so that your column width is exact. Not too tough.
No chance of wrapping because others have already fought that battle for you. Compatibility back as far as you likely will ever need to go. Quick and easy....Now, download, customize and deploy.
Voila. Grids FTW.
Over 11 years later. Apply display:grid to the container and divide the available space by grid-template-columns: 100px 1fr. Where 1fr represents a fraction of 100% of the remaining space.
<html>
<head>
<title>Cols</title>
<style>
#container {
display: grid;
grid-template-columns: 100px 1fr;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
</div>
</body>
</html>
As suggested by mtmurdock it is possible to remove the .clear rule and move it to the pseudo-element #container::after.
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
#container::after {
clear : left;
display: block;
content: '';
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
</div>
</body>
</html>
Another idea is to include the left div in the right div,
which in turn coincides with the line container:
[right][left] ... [/left] ..... [/right]
x { border: thick solid navy; padding: 2px; }
.lineContainer, .container > p {
padding-left: 100px;
margin: 0;
line-height: 1.5;
}
.left, em {
margin-left: -100px;
display:inline-block; box-sizing: border-box; width: 100px;
vertical-align: top;
}
.div-in-div {
display:inline-block; box-sizing: border-box; width: 100%;
vertical-align: top;
}
<h3>Layout: div-left is contained within the right-div / lineContainer</h3>
<pre>
[right][left] … [/left] … [/right]
</pre>
<div class="lineContainer" style="background:floralwhite; "><div class="left">Hello</div>Hello there</div>
<p>Using the above scheme,
we can make old-fashioned typewriter tab stops as shown here.</p>
<h3>The Capital Cities of the UK</h3>
<div class="container" style="background-color: floralwhite; ">
<p><em>England</em> - The capital is London.</p>
<p><em>Scotland</em> - The capital is Edinburgh.</p>
<p><em>Wales</em> - The capital is Cardiff.</p>
<p><em>Northern Ireland</em> - The capital is Belfast.</p>
<p><em>The capital of the UK is</em> - London.</p>
<p><em>Source</em>- Project Britain, capitals.</p>
</div>
<h3>Div in div</h3>
<div class="lineContainer" style="background:floralwhite; ">
<div class="left">Div in container</div><!--No white space here
--><p class="div-in-div" style="background: red; font-size: x-large; margin: auto 0; ">Hello there</p>
</div>
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.