Here, In this example I have two divisions where one is nested within another. I'm calling the outer division a parent and the division which is nested a child.
CSS
/* for parent div tag*/
#parent{
width: 500px;
height: 300px;
z-index: 1;
background-color: #CCC;
border:thin solid black;
margin:25px;
padding:20px;
}
/* for child div tag */
#child{
border:thin solid #F00;
height:50px;
background-color:#FFC;
}
HTML
<!-- Start of parent tag -->
<div id="parent">
<p> This is parent div tag. </p>
<!-- Child div tag -->
<div id="child">
<p> This is child div tag. </p>
</div>
<!-- End of parent tag. -->
</div>
It looks like this in the web browser:
My question is: How does the child div tag gets the size of it's width? Is it because of inheritance from the parent div tag or is it just by default behavior that it will expand up to the parent div container if you don't specify a width?
Width cannot be inherited. What you are seeing is default behavior.
See the specs on block level elements
"Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme." -- W3C
By default, block elements have a width of 100%. That means that if a width isn't specified, it will be 100% of the parent.
In this case, the parent's width is 542px.
The calculation is based on width:500px; + padding-left:20px;+ padding-right:20px; +border 2px;
The child's width is exactly 500px. (100% of the parents width - minus padding/border).
jsFiddle here You can play around with it and inspect the elements.
Yes, block level elements will expand to the width that the parent will let them (width minus padding).
Edit: if you want the child to only be as width as it contents, add display: inline-block to it (also check here).
Yes, the div is by default a block element. And because you didn't specify width its value is "auto". This means that the browser calculates the width and normally that's 100% of the width of the parent element.
Related
When I put a scrolling div (i.e. <div style="width:200;height:200;overflow-y:scroll;">) inside of another div that has an overflow attribute it treats the second div like I don't have dimensions set (height 200 and width 200). The scroll bar on the right shows up but it wont work because every time I add content the div just drops instead of making it scroll.
First divs css:
#slide1_container
{
width:976px;
height:520px;
overflow:hidden;
position:relative;
margin:0 auto;
}
Nested div:
overflow-y:scroll;
You're missing the px on the dimensions in your div's inline styles.
<div style="width:200;height:200;overflow-y:scroll;">
Should be
<div style="width:200px;height:200px;overflow-y:scroll;">
I have the following div
<body>
<span style="border:1px solid red; display:inline-block">
Some text<br />
<hr />
some more text
</span>
</body>
In "normal" web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
But in IE7 the hr causes the div to expand to 100% of the body.
Is there any clever css I need to add somewhere so it behaves correctly in IE7?
Please note, I can't set any fixed width.
In IE6/7, display:inline-block only works on elements that are inline by default (e.g., span). So if you try setting a div to display:inline-block, it won't work in IE6/7.
An inline element will size itself to the width of its content. An inline-block element will do the same by default, if it's not given an explicit width. If the hr is 100% (100% of its parent, which in turn is 100% of the child), then there's a circular definition for the hr width that may not work as expected (100% of what? 100% of itself).
To avoid a circular definition for the width that may not work as expected in some browsers (especially IE6/7), either the container of the hr (div, span, or whatever) should have a defined width (in px, %, or em) or the hr itself should have an explicit width (in px or em). Otherwise, the width is not defined in any identifiable way, and it's left up to the browser to decide what to do by default.
If you can't set any widths, that may rule out using an hr tag. And based on the tests I ran, the options don't look very good for CSS solutions either (without setting a width).
Edit:
I think the only way to do this without setting widths or relying on JavaScript or jQuery, is if it's acceptable to have a horizontal line after every line of text (including any long paragraphs that wrap around to the next line, if there are any). In that case you could add a bg image to the container that contains a horizontal line at increments equal to the line-height of the text, displayed at a vertical offset equal to the line-height so a line doesn't appear at the top of the first line of text.
HTML
<div class="main">
<p>This is the first line.<br/>
This is the second line.<br/>
This is a long line that will wrap around to the next line if the container is not very wide.
</p>
</div>
CSS
.main {
background: url(image.png) repeat-x left 15px;
}
p {
font-size: 12px;
line-height: 15px;
}
jsfiddle demo
The width property of the <hr> tag has been deprecated, so you're styling options are limited on the <hr> tag.
15.3 Rules: the HR element
Index of Attributes
A more modern approach is to use the border property of a <div> instead.
Image rendered by IE 7:
Image rendered by Chrome 19:
jsFiddle Demo
HTML
<body>
<div style="border:1px solid red; float:left;">
<p>
Some text
</p>
<p class="border-top">
some more text
</p>
</div>
</body>
CSS
.border-top{
border-top:#000 1px solid;
padding-top:1em;
}
Note: IE 6 & 7 don't support display:inline-block, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:
CSS display: inline-Block: Why It Rocks, And Why It Sucks
Found a method at a blog. The original one required modernizer.js. I've edited it.
HTML:
<div class="hrdemo"><hr /></div>
CSS:
.hrdemo hr {
display:none
}
However, if your div.hrdemo is inside some floated container; you may have to assign a fixed width for it (for IE7).
In my application I have tags that can be from 5 to 15 characters. By that reason the tags width differ, but the surrounding divs increases with the parents width, not the content.
What should I put in the CSS to make the divs width adapt to the width of it's content?
Thanks in advance!
HTML
<div class="tag">
<a href="#">
<span class="content">Test album</span>
</a>
X
</div>
CSS
div.tag {
background: red;
}
Test case: http://jsfiddle.net/T4XJ3/1/
The <div> element has display:block, so it will always take the full width of their container.
You can make them "flexible" by using display: inline-block (demo).
Is this what you're looking for?
inline-block to the rescue!
div.tag {
background: red;
display: inline-block;
}
From the w3c spec:
This value causes an element to generate an inline-level
block container. The inside of an inline-block is formatted as a
block box, and the element itself is formatted as an atomic
inline-level box.
In simpler terms this means that outside of your div it acts like a span would (sizes to fit contents, flows inline in content, etc.), and inside of your div it acts like a div normally would (for positioning, sizing, padding, etc.).
I have an item on the DOM that I'd simply like to have fill its parent's width, regardless of what that is:
<div width="800">
<div class="filler"></div>
</div>
How can I specify in CSS that the filler class match the width of its parent?
.filler {
?
}
Have you tried: width: 100%; ?
Depending on what you inner item is, there are various approaches.
If it's a block-level element (a paragraph, a div, etc.), it will automatically adjust itself to fill 100% of the container's width.
If it's an inline element, too bad for you, it won't accept width:100% until you convert it to a block-level element: display:block.
Floated elements are a special case: they will only span to the width of their inner content, even if they're block level elements. They require width:100%.
Absolutely positioned elements are even tougher: they need width:100%, but the container also needs a positioning context, eg. position:relative.
Examples of all four cases: http://jsfiddle.net/dD7E4/
If the inner element is not a div and has padding or margin, flexbox might be the best solution:
<div class="container">
<div class="filler"></div>
</div>
.container {
display: flex;
}
.filler {
flex-grow: 1;
}
See also this answer about how to fill remaining vertical space.
Unless there's something stopping them, block-level elements such as div and p will always fill the entire width of their container. If you have an inline element such as a span or an a, you could style it as display: block to turn it into a block-level element, but this will also put a line break before and after it.
div is a block element and by default fill his parent.
if it doesn't you probably use float:left or float:right or display:inline or your parent is not 800px.
(maybe you should try with style="width:800px" or width="800px" instead of width="800")
I usually put a color border to see how it works.
By default it will fill its parent element's width as div is an block element.
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.