How To Test Parent Content Width Extension

Q

How To Test Parent Content Width Extension? - CSS Tutorials - Understanding Multiple Element Formatting Rules

✍: FYIcenter.com

A

One of the horizontal formatting rules says: If the width of the parent element is specified and less than the full width of the child stack. the width of the parent element will be extended match the full width of the child stack. The HTML and CSS document shows you a good example on this rule:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  DIV#parent {width: 280px;
    margin: 5px 20px 5px 20px; 
    border: 20px solid #ffbbbb;
    padding: 5px 20px 5px 20px; 
    background-color: #ddffdd}
  P#child {width: 200px;
    margin: 5px 20px 5px 20px; 
    border: 20px solid #bbbbff;
    padding: 5px 20px 5px 20px; 
    font-size: 14px; 
    background-color: #ffffff}
  SPAN#parentWidth {width: 280px}
  SPAN#parentContent {width: 200px}
  SPAN#childWidth {width: 200px}
  SPAN#child {width: 120px}
  SPAN#w20 {width: 20px; background-color: #ffffff}
  SPAN#g20 {width: 20px; background-color: #dddddd}
  SPAN#ext {width: 40px; background-color: #ff0000}
</style>
</head><body><div class="page">
<H1>Content Width Extented on Parent Block</H1>
<table id=out><tr><td>
<span id=w20>20 </span>
<span id=parentWidth>Parent width: 280</span>
<span id=ext>ext </span>
<span id=w20>20 </span>
</td></tr><tr><td>
<span id=w20>20 </span>
<span id=g20>20 </span>
<span id=w20>20 </span>
<span id=parentContent>Parent content: 200</span>
<span id=ext>ext </span>
<span id=w20>20 </span>
<span id=g20>20 </span>
<span id=w20>20 </span>
</td></tr><tr><td>
<span id=w20> </span>
<span id=g20> </span>
<span id=w20> </span>
<span id=g20>20 </span>
<span id=childWidth>Child width: 200</span>
<span id=g20>20 </span>
<span id=w20> </span>
<span id=g20> </span>
<span id=w20> </span>
</td></tr><tr><td>
<span id=w20> </span>
<span id=g20> </span>
<span id=w20> </span>
<span id=g20> </span>
<span id=w20>20 </span>
<span id=g20>20 </span>
<span id=child>Child content: 120</span>
<span id=g20>20 </span>
<span id=w20>20 </span>
<span id=g20> </span>
<span id=w20> </span>
<span id=g20> </span>
<span id=w20> </span>
</td></tr><tr>
<td id=box><div id=parent><p id=child>
Welcome to FYIcenter.com, the resource
center for visitors like you! 
</p></div></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as ChildBlockExtension.html, and view it with a browser, you will see how the content width of the parent block is extended to meet the full width of the child block:
Parent Block Extension

2007-05-11, 4917👍, 0💬

How Are Vertical Margins between Two Block Elements Collapsed
How Are Vertical Margins between Two Block Elements Collapsed? - CSS Tutorials - Understanding Multiple Element Formatting Rules The margins between two block elements will be collapsed into one margin. The taller margin stays. And the shorter margin disappears. The tutorial HTML and CSS document be... 2007-05-11, 7163👍, 0💬

How Are the Parent Padding Spaces Collapsed with the Child Margins
How Are the Parent Padding Spaces Collapsed with the Child Margins? - CSS Tutorials - Understanding Multiple Element Formatting Rules If child block element is enclosed in a parent block element, the vertical margins of the child element could be collapsed with the padding spaces of the parent eleme... 2007-05-11, 6297👍, 0💬

What Needs To Be Considered When Designing Page Layout
What Needs To Be Considered When Designing Page Layout? - CSS Tutorials - Page Layout and Background Image Design There are a number of technical issues you need to consider when designing Web pages: Screen resolution - How many graphical points per inch on a computer screen? Browser resolution - Ho... 2007-05-11, 6222👍, 0💬

What Are White Spaces in HTML Documents
What Are White Spaces in HTML Documents? - CSS Tutorials - Understanding Multiple Element Formatting Rules White spaces are combinations of continuous white space characters: " " - The space character. "\t " - The tab character. "\n " - The new line character. "\r " - The carriage return character. 2007-05-11, 5683👍, 0💬

How To Test Child Full Width Extension
How To Test Child Full Width Extension? - CSS Tutorials - Understanding Multiple Element Formatting Rules One of the horizontal formatting rules says: if the width of the parent element is specified and greater than the full width of the child stack. the full width of the child stack will be extende... 2007-05-11, 5533👍, 0💬

What Happens to Multiple White Spaces in In-line Elements
What Happens to Multiple White Spaces in In-line Elements? - CSS Tutorials - Understanding Multiple Element Formatting Rules If there is a sequence of multiple white spaces and it is broken into pieces in different in-line elements, it will collapsed into the first white space on the left hand side,... 2007-05-11, 5498👍, 0💬

How White Spaces Are Formatted
How White Spaces Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules White spaces are formatted depending where they are located: White spaces will be ignored between block elements. White spaces will be preserved in <PRE> tags. White spaces will be collapsed into... 2007-05-11, 5427👍, 0💬

What Is Screen Resolution
What Is Screen Resolution? - CSS Tutorials - Page Layout and Background Image Design Screen resolution is measure by how many graphical points (pixels) per inch or DPI (dots per inch) on a computer system. Screen resolution can be changed within a range on most of today's computer systems. For examp... 2007-05-11, 5298👍, 0💬

How Is the Full Width of a Block Element Extended
How Is the Full Width of a Block Element Extended? - CSS Tutorials - Understanding Multiple Element Formatting Rules If the full width of a block element needs to be extended to meet the width of the parent element, brower will following there rules: The full width of a block element is the sum of l... 2007-05-11, 5158👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.