Look at this simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {padding:20px;}
#outer {background-color:#ff0000;}
#inner {width:500px; border:1px solid #0000ff;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<p>Why the hell outer div bg color does not expand?</p>
<p>Why the hell outer div bg color does not expand?</p>
<p>Why the hell outer div bg color does not expand?</p>
</div>
</div>
</body>
</html>
When browser page is shrinked below the width of <div id="inner"> (i.e. 500px in this example) and then you scroll browser page to the right, you will see that the right side of the inner div does not have the red background anymore:
Do you know how to fix the background of the outer <div> in order to make it never shrinks below the inner <div> width??? (I still need the outer div background to expand to full browser width so it can not be set to width:500px; too).
EDIT: in other words I would like to see the red background color of the outer div to fill the total 500px width of the inner div and not to shrink to browser size leaving the right side of the inner div with no red background. In order to do this I can not simply set the outer div to be 500px too because when browser is expanded I need the red background color to expand too.
Add this to your css
#outer {background-color:#ff0000; min-width: 500px;}
That's because your inner div is overflowing from the outer div, and not making it expand. Adding overflow: hidden to your outer div, will prevent this from happening by hidding the part of the inner div that overflows.
You can see a demo of that behavior here: http://jsfiddle.net/p6BQg/
More about the CSS overflow property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
EDIT: To keep the background color on the inner div please see this example: http://jsfiddle.net/p6BQg/1/
body { padding: 20px }
is causing the issue you see. removing that will prevent the "shrinking" as you call it.
for example: http://jsfiddle.net/MvJTa/
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.
I have a website I am developing.
I have this div with another div inside of it named 'second'.
I want the first div to be the same height as 'second'.
So I make the height: of the first div: height:auto; but that doesnt work, that makes it shorter then 'second'. How do I set the height of the first div to match the 'second' div?
The reason why the height needs to be the same as 'second'is because 'second' has expanding content in it.
There are some reasons the outer div doesn't span as the inner does.
.second is floated. If that's that case add <div style="clear:both"></div> just before the outer div is closed.
.second is absolutely positioned. There's no way to resolve that issue.
Try setting padding to 0 and margin to 0 as well.
You can ignore the height.
this code below worked for me.
<html>
<head>
</head>
<body>
<div style="border:1px solid #ccc;margin:0px;padding:0px;">
<div style="border:1px solid #000;height:100px;">
</div>
</div>
</body>
</html>
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
I want the outer div to span to all the page width with the background color #efefef.
The inner div will be centered and have white background with 995px width.
So i have this code:
<div style="background-color:#efefef;width:100%;">
<div id="photoUploadWrap">
Now the photoUploadWrap style is:
#photoUploadWrap{width: 995px;margin: auto;}
And it has tables and more divs inside it. The div gets centered alright but the
outer div doesn't display the #efefef background.
What's wrong here? I also tried to put a border on the outer div with no success.
The outer div has no height (or at least the browser doesn't think so). This is why you don't see the border or the background color. Why not just set the background color on the body tag?
Not sure why this isnt working, but when I changed it to:
<div id="divContainer">
<div id="photoUploadWrap">
aaaa
</div>
</div>
#photoUploadWrap{width: 995px;margin: 0 auto;}
#divContainer { width: 100%; background-color: #efefef; }
it worked.
check it Live
Here is my code:
i am assuming am doing something wrong, but am expecting the padding on the right to also be 2px?
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid 1px gray;}
#outer{width:200px; padding:2px;}
#inner{width:100%;}
</style>
</head>
<body>
<div id="outer">
<div id="inner"> </div>
</div>
</body>
</html>
Render:
Your problem is that you have specified the size of the inner box to be the same size as the outer box. Set the width to auto and your problem goes away.
The padding makes an extra invisible box around your object, so the actual size of the outer is more than 200. However, inside it is 200. Same with the border. On the inner box, when you then specify it to be 100% it will be 200px, but the border will take up 2px, making an offset that makes it look like the padding is not being applied.
div is a block level element, which by definition will expand to take up the full width of its parent container taking into account any margins, padding and borders. specifying the #inner width to 100% is effectively the same as setting it to 200px. Just remove the width declaration and you'll be all set.