I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}
Related
I have simple task with two div. I need that both have colored borders and inner div must use all space. Here my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;border:solid 10px black;background:red;}
.d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
<div class=d1>
<div class=d2>some text</div>
</div>
</body>
</html>
But browser (IE, Chrome) do not catch that I set borders and 'divs' to show with artifacts.
Anybody catch this bug?
Do this instead:
<style type='text/css'>
.d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
.d2{ height:100%; width:100%; background:green;}
</style>
I think that gives you the effect you're after, basically replacing the border on .d2 by using a background colour on .d1, adding padding to .d1 to act as a border of sorts.
If you add any margin or padding to .d2 it's going to add to the 100% height and width values which means they'll overflow.
Hope that makes sense.
edit: note how I've compensated for a padding of 20px by reducing the height and width by 40px (because it will add padding on both left and right and also top and bottom, making for 40px additional width and height)
If you know width and height of parent div, you can set correct styles for the children, without percentage, so this jsFiddle may do a work for you.
Borders aren't included in your width/height, then your 150x150 will "become" a 170x170 with a 10px border.
Two solutions :
Take borders in account, increasing your div width/height
Use more divs, and forgot borders
Here is a Jsfiddle to show you both solutions
Because you specified borders thickness the height and width will not take that into account to show nested inside the borders. A solution for your problem if I understand it correctly you can achieve as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;}
.d2{ height:73%; width:73%;border: solid 20px blue; background:green;}
</style>
</head>
<body>
<div class="d1">
<div class="d2">some text</div>
</div>
</body>
</html>
Basically you are having issues with the Html box model.
you can either figure out the maths your self or depending on which browsers you have to support there is the new "box-sizing" css style which changes how the box model works.
here is a fiddle showing how it can be used:
http://jsfiddle.net/EHUab/
Consider a page (full source below) where you have:
A containing div, styled so its border is visible.
A contained box, which content can't be made smaller than a certain width. Here we'll use an image for this.
This renders as follows, and as expected the div "contains" the image:
However, if you make the browser window smaller, you get to a point where it is not large enough for the image: part of the image won't be visible, and the browser needs to add a scrollbar. So far so good. However, the div size is still based on the viewport width, and consequently the image gets outside of the div:
Instead, I would like to have the div always be "around" the image, and become wider if containing box can't be made narrower. Interestingly, this is exactly what happens in Quirks mode, here as rendered by IE8:
How can I get, by adding CSS, the exact same result I get in Quirks with IE8, but in standards mode? And for reference, here is the full source of this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Styling */
div { background-color: #999 }
body { font-family: sans-serif }
div { margin: .5em 1em; padding: .5em }
</style>
</head>
<body>
<div>
<img src="http://placekitten.com/g/400/100"/>
</div>
</body>
</html>
Try this:
CSS:
Old answer, Truncated
HTML:
Old answer, Truncated
Demo
EDIT:
After much tinkering, this is what i could come up with:
CSS:
.table {
display:table;
background-color: #999;
width:90%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
margin: .5em 1em;
padding: .5em
}
HTML:
<div class="table">
<div class="row">
<div class="cell">
<img src="http://placekitten.com/g/400/100"/>
</div>
</div>
</div>
Accompanying fiddle: http://fiddle.jshell.net/andresilich/Q4VnF/
I'd go for div { display: table-cell; }
EDIT: I don't think this can be done with the markup as given. You can get close using div { display: table; width: 100%; } but it doesn't like having a margin. If you use two block elements then you can put { display: table; width: 100%; } on the outer element and { display: table-cell; } and the margin, padding and background on the inner element.
With display: inline-block it also works.
How how to make <a> text align bottom? I have added height = line-height, and vertical-align:bottom; but the text still in the middle of the div. How to do? Thanks
Test in http://jsfiddle.net/BanAz/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#layer{width:198px;height:48px;line-height:48px;border:1px #000 solid;vertical-align:bottom;}
#layer a{text-decoration:none;}
</style>
</head>
<body>
<div id="layer">
menu
</div>
</body>
</html>
Options include:
Remove line-height: 48px and add display: table-cell to #layer:
http://jsfiddle.net/jgQ9k/1/
Note that this won't work for IE7, because display: table-cell isn't supported.
Use a large line-height: http://jsfiddle.net/jgQ9k/2/
And the method I would actually use:
Add position: relative to #layer, and position:absolute; bottom:0 to #layer a:
http://jsfiddle.net/jgQ9k/3/
The height size (48px) is equal to line-height size (48px). Try to increase the height size, and you will see the css properties work fine and the text will be positioned on the bottom
#layer {
display: table-cell;
}
I'm having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it's been displaced by an element above it, so the child overflows the parent.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<style type="text/css">
html, body, #container, #content
{
height: 100%;
min-height: 100%;
}
html { border: 1px solid red; }
#content { border: 1px solid blue; }
</style>
</head>
<body>
<div id="container">
<h2>Test</h2>
<div id="content">
<p>Testing</p>
</div>
</div>
</body>
</html>
I'm beginning to believe that simply this is simply the correct behaviour and just doesn't work, but I figured I'd ask the collective intelligence first before overhauling the approach.
Yeah, you can use overflow: hidden; or start playing with floats and clears.
I don't think God intended for pages to just be exactly one screen high. :-)
Or is a vertical scrollbar allowed?
If so, then you might check out: http://matthewjamestaylor.com/blog/perfect-full-page.htm
I'm not exactly sure what you're trying to accomplish, but this:
html, body
{
height: 100%;
min-height: 100%;
}
Doesn't make sense. You can't control the height of the body element, as it contains everything else regardless, and the html element isn't even "displayed" in the same way div and span elements are.
The behaviour you describe is, indeed, what is expected to happen. Whenever you set an element's height/width to 100%, it means 100% of the parent element (with some possible exceptions where the element is absolutely positioned).
ur css is just behaving exactly as intended...
there is no exact way to do this with just css, without what brock said, very complicated float <-- and by the definition, floats need to know the fixed height and width, and is not dynamic. (In practice most browser will try to guess)
It is much easier if you use a little java script to find out the height of the screen, and first inner div, then set the second inner div to be the difference.
<div id="container">
<div id=content-top">
<h2>Test</h2>
</div>
<div id="content">
<p>Testing</p>
</div>
</div>
I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to have blue div always scale to the bottom of the containing grey, div. I've searched and tried various combinations, but all to nil effect.
edit:
Problem solved! Container needs an overflow: hidden, and the div that I want to stretch to the bottom (blue) needs padding-bottom: 1000px; margin-bottom: -1000; (or larger if you need)
I got this to work (in Chrome anyway) by setting the parent's div:
position: absolute;
and the child's div:
height: 100%;
If you need support from IE6 and up, the answer is: You can´t in css only.
There are different solutions to really scale the div or just have it appear like that:
You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
You can use javascript to calculate the height of the grey div and apply it to the blue div
There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.
Edit: The big padding / negative margin css solution:
The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.
In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.
The JavaScript to do it would be...
<div id="yourDiv" style="background-color: Blue; width: 150px;">
Hello
</div>
<script type="text/javascript">
var div = document.getElementById('yourDiv');
div.style.height = document.body.clientHeight + 'px';
</script>
Edit:
Check this link for getting clientHeight in different browsers...
Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.
Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...
Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.
Acorn
Another way to set height 100% in html objects is use styles:
<html>
<head>
<style>
html, body {
height: 100%;
}
#mydiv {
height: 100%;
background-color:red;
}
</style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
The key is to have a set height on the parent container. Then the height:100% works
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css" media="all">
#main {
height:30em;
width:30em;
background-color:#999999;
padding:1em 1em 0px 1em;
}
.inner {
width:5em;
}
#blue {
float:right;
background-color:#0000FF;
height:100%;
}
#magenta {
float:left;
background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
<div class="inner" id="blue">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
</div>
<div class="inner" id="magenta">
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
</div>
</body>
</html>