What do I have to do to prevent the following from stretching more than 100%? It obviously stretches to 100% then adds on the padding... Thanks!
<!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" media="screen">
#box {
width: 100%;
padding: 20px;
border: 1px solid #000;
}
#box input {
width: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<form>
<input type="text" value="" />
</form>
</div>
</body>
</html>
Your width:100% on the div is altogether unnecessary. Div's are block level elements which automatically expand to 100% of their container. Remove the width:100% from your div declaration and the padding will be contained within the parent container, no scrolling or extended width.
DON'T use a negative margin, that's just adding a hack to achieve something simple.
You can use this rule in general: You almost never have to put width:100% on a div (I can't think off the top of my head why you would unless it was displayed inline or something) because as mentioned above, block level elements always expand to 100% of their container
edit: that was dumb to suggest setting width 100% on a div displayed inline as you can't set the dimensions on an inline element
Create a new form rule and move the padding: 20px; declaration to it.
#box {
width: 100%;
border: 1px solid #000;
}
form {
padding: 20px;
}
Related
In the below lines of html code, the div element extends to the entire height of the page.
Why does adding a <!DOCTYPE html> to it not make it take 100% height of the page? How can I get 100% height while also adding <!DOCTYPE html>?
<html lang="en">
<head>
<style type="text/css">
#menu {
background: green;
height: 100%;
width: 100px;
}
</style>
</head>
<body>
<div id="menu">
Menu
</div>
</body>
</html>
Add the following to your Styles section:
html, body {
height: 100%;
}
The reason your content is not taking 100% height is because it is inherited from its parent element when you use percentages. The parent of div#menu is body, and body has no inherent height. The parent of body is html, and html also has no inherent height. html's parent is the document/viewport itself, which does have inherent height of 100%.
I would also personally recommend that you use an external stylesheet for your CSS, instead.
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.
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>
In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
html, body, div {height: 100%; margin: 0; padding: 0; }
#main {
width: 320px;
background:#7C7497;
height : 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>
Q1. Can anyone explain why?
Can anyone explain how to remove it?
Q2. Can anyone explain why there is a cushion of whitespace above the div? Can anyone explain how to remove it?
Add this:
p {margin: 0; }
Your p element has some margin on the top.
Let me recommend using a CSS reset file. I like the YUI one.
According to firebug it is margin in <p>. At least in 3.6 setting margin-top to p solves problem.
p {
margin-top: 0;
}
It's the paragraph.
If you add
p { margin: 0px; padding: 0px }
all gets well, including the scroll bar.
Why the paragraph feels entitled to leave its parent element like that, I'm not entirely sure yet.
A1. You are getting a scroll bar because the div has a size of 100% of i browser window not 100%. Because the div is the same size as the browser window but is shifted down a scroll bar is needed to display the bottom of the div.
A2. The whitespace above the div is the top margin of the p element.
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;}