We have a div with static positioning. Inside we have a paragraph with a margin.
The height of the div will be the paragraph without the margin
We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.
What is the explanation of this?
Here is the html code:
<!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="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nivel1">
<div id="nivel21">
<p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
<p>Este es el primer parrafo</p>
</div>
</div>
</body>
</html>
And the CSS code:
body {
margin:0;
padding:0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:2em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:2em;
background-color:#FC0;
}
And here is a link to the test site.
After several edits, I think I have got the answer now :)
I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element
that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distance between the top of the
topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of
the topmost block-level child box and the bottom margin-edge of the bottommost block-
level child box.
Those "certain cases" listed in section 10.6.6 include floating elements.
The #nivel21 element in the question is a floating element, and it contains block-level children (a <p>), therefore this special-case rule is applied and the height of the <div> is calculated using the top and bottom margin-edges of the <p> tag.
Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the <p> tag:
The [...] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [...]
The <p> tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the <p> tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the <p> tag.
I hope this answer makes sense to someone other than me!
I think When you use the float property the browser pads the element to show is floating.
Well, since there is no question and no clear naming of your elements i'll just assume you want to put 2 columns in a container.
Cleaned up code with some more clear naming and use of classes results in this:
(hope this is what you were looking for)
<html>
<head>
<title>divs</title>
<style>
.container{
float: left;
background-color: #0F3;
}
.column {
margin: 2em;
float: left;
padding: 5px;
}
#lefty{
background-color: #C00;
}
#righty{
background-color: #FC0;
}
</style>
</head>
<body>
<div class="container">
<div id="lefty" class="column">
<p>Column number 1</p>
</div>
<div id="righty" class="column">
<p>Column number 2</p>
</div>
</div>
</body>
</html>
This happens because of the interaction of the two divs. Remove the floating one, the static one will shrink. What happens is, the floating div pushes the text in the static div down, thus expanding it.
More comments: The paragraph tag is irrelevant here. You can achieve the same effect by removing the paragraph margin and increasing the margin for the elements themselves. Either way, the statically positioned element would grow while the floating one would not. Same thing with this CSS:
body {
margin:0;
padding:0;
}
p {
margin: 0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:5em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:5em;
background-color:#FC0;
}
Related
I know that if any value is inherited it would show in the inspector.
<!DOCTYPE html>
<html>
<head>
<style>
div#outer {width: 500px;}
div#inner {text-indent: 10%; color: blue;}
/*p {width: 200px;}*/
</style>
</head>
<body>
<div id="outer">
<div id="inner">
This first line of the DIV is indented by 50 pixels.
<p>
This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for 'text-indent'
are inherited, instead of the declared values.
</p>
</div>
</div>
</body>
</html>
I think the width of div#inner is inherited from div#outer, but it shows up in computed column not in style as something inherited. Why? Do I misunderstand something?
Width isn't inherited. An in-flow block box with auto width expands to fit as much horizontal space as its containing block allows, but that's not the same thing as inheritance.
Inner html dom element will always cover it's parent's width , considering that no change is there in display properties of child.
This jsFiddle illustrates what this question refers to (full code below). Note that, even though #outer-div should have 0 padding, and #inner-div should have 0 margin-bottom, it appears as though the there's some padding and/or margin between the bottom edges of #outer-div and #inner-div.
Where does this come from, and, more importantly, how can I suppress it?
css
html,body,div{margin:0;padding:0;border:0;outline:0}
body{background:white;}
#outer-div{
background:lightgray;
margin-top:20px;
text-align:center;
}
#inner-div{
background:black;
display:inline-block;
}
html
<!doctype html>
<body>
<div id="outer-div">
<div id="inner-div" style="background:black;width:100px;height:100px;">
<div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;">
<div style="background:white;margin:1px;width:94px;height:94px;"></div>
</div>
</div>
</div>
Inline elements are sensitive to white space and that gap is reserved for descender elements. Adding vertical-align:top to #inner-div is one way to fix this:
#inner-div {
background:black;
display:inline-block;
vertical-align:top;
}
jsFiddle example
A second way is to set font-size:0 on the parent element in this jsFiddle example.
Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..
Here are my questions,
What would be the correct width of my IE window.
What would be the perfect height of my window..When I specify a value nothing changes.
I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.
First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.
Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.
Third, you may want to check out this CSS tutorial at HTMLDog
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
The following are 2 div, side by side. But once a width: 100px is added to #right, they won't be side by side any more. The second div will wrap to the next line. The browser's width is like 1200px, so it is not a concern, and this happens on both Firefox and Chrome. What is a reason for that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style>
#left {
width: 100px;
float: left;
}
#right {
}
</style>
<div id='left'>
hello
</div>
<div id='right'>
world
</div>
Floats are funny things in CSS. They can easily cause this kind of confusion.
I recommend using display:inline-block; (on both the divs) instead of float:left; in your example. It'll probably behave closer to how you're expecting.
Add float:left to the #right, it will fix the problem. Divs are positioned on new lines if the float is not specified.