Academic Tutorials



English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting
Chats

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
HLML
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
CVS
Python
Apple Script
PL/SQL Tutorial
SQL Server
PHP
.NET (dotnet)
Microsoft.Net
ASP.Net
.Net Mobile
C# : C Sharp
ADO.NET
VB.NET
VC++
Multimedia
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Matlab
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Graphics
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
SEO
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Eclipse
J2ME
JBOSS
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Cobol
Assembly Language
Mainframe
Forth Programming
Lisp Programming
Pascal
Delphi
Fortran
OOPs
Data Warehousing
CGI Programming
Emacs Tutorial
Gnome
ILU
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Oracle
MySQL
Operating System
BSD
Symbian
Unix
Internet
IP-Masquerading
IPC
MIDI
Software Testing
Testing
Firewalls
SAP Module
ERP
ABAP
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Netweaver
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Accounting
Financial Accounting
Managerial Accounting
Network Sites


CSS 2.0 Properties - Boxes


Previoushome Next






CSS2 Properties - Boxes

A D V E R T I S E M E N T



Boxes

Display

This specifies the type of box that an element will produce. Possible values are block (e.g., P), inline (e.g., B), list-item (block element with list item marker box; e.g., LI), run-in (see below), compact (see below) and none (ignore element entirely and all of its descendants).

Display applies to all elements, has an initial value of inline and is not inherited.

IE 3 does not support display. IE 4 on the PC does not support display except for none. IE 5 supports block, inline and none. Opera supports block, none and inline. IE 4 on the Mac supports none. Netscape only supports none usably.

Compact boxes

If a compact box is followed by a non-floating block element, then it will go in the block element's left margin if there is room, but otherwise it will behave like a block element:

<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 40%">
Block element with big left margin
</P>

Compact box here   Block element with big left margin

<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 4%">
Block element with big left margin
</P>

Compact box here
  Block element with smaller left margin - so goes on next line

The width of compact elements is entirely determined by the width of their content (i.e., the width property has no effect unless they act as block elements). As a result, if they are wider than one line, they will be forced to act as block elements.

Note that where a compact box and block element are on the same line, for the purposes of calculating the height of the line box (see line-height), the compact box is taken into account. Note also that text-align: right would be applied to a compact element within the block element's margin. Text-align: justify would not be applied.

Run-in boxes

If a run-in box is followed by a non-floated block-level element, it is formatted as an inline element within that box. Otherwise it is treated as a block element.

E.g.:

<H1 style="display: run-in">
A run-in heading
</H1>
<P>
A P element

A run-in heading A P element

Height

Height is principally used to specify the height of block and replaced elements.

Heights can be specified as a length, % (of parent's height, but treated as auto if the parent did not have an explicitly set height), or as auto (which is the initial value).

P {height: 100px}

Height applies to all elements except non-replaced inline, table columns and column groups. Height is not inherited and can't be negative.

Note that 'height' does not specify the total height of the element, but only the height of its content, so that margins and borders are additional to 'height'.

Width

Widths can be specified as a length, % (relative to the width of the containing block), or as auto (which is the initial value). It does not apply to non-replaced inline elements (whose width is the width of their content, subject to the fact that they might occupy several lines of a containing block), to table rows or row groups. Width cannot be negative.

Width specifies the content width of an element. Therefore an element with a width of 100 pixels, a left margin of 100 pixels and a right margin of 100 pixels will occupy 300 pixels of space.

Width is not inherited.





Calculating the width and height of elements

Although width, margins and height will normally behave in an intuitive manner, it is useful to know how they work, especially since they do not always do what you expect.

To find the width and height of elements, precise rules are used. These are described below.

Width of elements

Static and relatively positioned inline-level non-replaced elements

Width is inapplicable (it is that of the content), and all auto values are replaced with 0.

For example: <SPAN>some text</SPAN>. In this example, the initial values for margin-left and margin-right are auto. As stated, this will be treated as 0. The initial value for width is also auto; this will be treated as the width of the element's content.

Static and relatively positioned inline-level replaced elements

If an element is replaced (such as IMG), width: is replaced by the intrinsic values for the elements, and other auto values are treated as 0.

Floating non-replaced elements

All auto values become 0, meaning that floating non-replaced elements must have an explicit width.

Floating replaced elements

Width: auto is replaced by the element's intrinsic width, and all other auto values by 0.

Block-level static and relatively positioned elements

Generally, width + padding-left + padding-right + margin-left + margin-right + border-left-width + border-right-width = width of the containing block.

It should be noted that border widths are only of relevance if a border style has been set.

This equality is solved by the browser.

On the root element (i.e., BODY or HTML) the width of the parent element is that of the viewport (or window).

1. If all the values are set to a value other than auto, then margin-right is adjusted to satisfy the equation.

Block-level non-replaced elements

If the equality cannot yet be solved, the rules below are used.

2. If exactly one of the values is set to auto, the value is put in for it to satisfy the equation.

3. If width: auto, then any other remaining auto values are replaced with 0, and a value is put in for width to satisfy the equality.

4. If margin-left and margin-right are both still auto, they will be set to equal values.

Block-level replaced elements

If the equality cannot yet be solved, the rules below are used.

2. If an element is replaced (such as IMG), width: auto is replaced by the intrinsic value for the element.

3. If margin-left and margin-right are both still auto, they will be set to equal values.

Absolutely positioned (including fixed) elements

For absolutely positioned elements, the sum of the element's horizontal properties must add up to the width of the containing block. Therefore the following equation must be observed.

Left + width + padding-left + padding-right + margin-left + margin-right + border-left-width + border-right-width + right = width of the containing block.

  1. Left: auto becomes the distance from the left edge of the containing block to the left margin edge of where the box would be with position: static.
  2. If the element is replaced, width: auto is replaced with the intrinsic width of the element.
  3. If width: is still auto, replace left: and/or right: auto with 0.
  4. If any of left, right or width are still auto, replace margin-left and/or margin-right: auto with 0.
  5. If margin-left and margin-right are both still auto, solve the equation subject to the constraint that margin-left must be the same as margin-right.
  6. If only one auto remains, solve the equality.
  7. If no autos remain, and hence the equality is mathematically impossible, disregard right and solve the equality.

Height of elements

All replaced elements

Height: auto becomes the element's intrinsic height, and all other auto values become 0.

Inline non-replaced elements

All auto values are set to 0, and height is ignored.

[Block and floating] non-replaced elements

Apart from height, all auto values are set to 0. If height: auto, then if the element only has inline children, height is the distance from the top of the top line box to the bottom of the bottom one.

If it has block children, it is from the top border-edge of the topmost block child box (including anonymous boxes (i.e., those generated by the element itself)) to the bottom border-edge of the bottommost block child box.

Absolutely positioned (including fixed) elements

The equation is top + height + padding-top + padding-bottom + margin-top + margin-bottom + border-top-width + border-bottom-width + bottom = height of the parent.

  1. Top: auto becomes the distance from the top edge of the containing block to the top margin edge of where the box would be with position: static.
  2. If the element is replaced, height: auto is replaced with the intrinsic height of the element.
  3. If both height: and bottom are still auto, replace bottom: with 0.
  4. If bottom or height are still auto, replace margin-top and/or margin-bottom: auto with 0.
  5. If margin-top and margin-bottom are both still auto, solve the equation subject to the constraint that margin-top must be the same as margin-bottom.
  6. If only one auto remains, solve the equality.
  7. If no autos remain, and hence the equality is mathematically impossible, disregard bottom and solve the equality.

Automatic margins and overconstraining

You might well have found the above a bit too much. It is very significant, however, so here's some examples of the significance that it has. Say you want to give an element a width of 50% and a right margin of 25%. You might think that you can do that with ELEMENT {margin-right: 25%; width: 50%}. Not so, however, since margin-left's initial value is 0, so that statement is equivalent to ELEMENT {margin-left: 0; margin-right: 25%; width: 50%}. Since the element's properties must sum to 100%, and 50% + 25% is only equal to 75%, it is necessary to disregard one of the values. That value is margin-right (as stated above), so in fact you will get a right margin of 50%. To avoid this problem, you would specify margin-left: auto, which would mean that the element is no longer overconstrained.

A similar example to this is the case where you wish to center the element (not the text in the element, the box itself). This would be done with a statement like P {margin-left: auto; margin-right: auto; width: 50%}. Since, if margin-left and margin-right are set to auto, the margins will be set to equal values, this will center the element. Thus it is equivalent to margin-left: 25%; margin-right: 25%; width: 50%.

Another important example is where you have positioned an element:

#fixed {top: 80%;
bottom: 0;
position: fixed;
height: 20%}

In this example the desired effect won't be achieved, since the element is overconstrained, as all of top, bottom, margin-top (initial value is 0), height and margin-bottom are set to a value other than auto, bottom will be ignored. To avoid this, you should set margin-top: auto, since this would remove the overconstrained nature of the element.

Examples

<P style="margin-left: 50%; line-height: 15px">
<br>
<br>
</P>

This would result in a P element with width equal to 50% of its containing block and 45 pixels high.

<P style="margin-left: 50%; margin-right: 0; width: 100%">
</P>

Since the P element is overconstrained, margin-right is ignored and therefore it is given margin-right: -50%.

Max-width, min-width, min-height, max-height

These properties specify the minimum and maximum widths and heights of elements; they apply to all elements except non-replaced inline and table elements, and are not inherited.

They specify a % (relative to containing block width in the case of width, or its height in the case of height) or a length. In addition, the max's may take the keyword 'none'. The mins are initially 0, and the initial max value is none.

They influence elements thus:

  1. if it happens that the min value is greater than max, the max value is set to the min value
  2. if the width (or height) that follows from the box model is greater than the max value, set the width (or height) to that value and re-solve the equality
  3. if the width (or height) that follows from the box model equation is less than min-, set the value to min- and re-solve.

These are of use when you do not want to be constrained by an actual height or width, but want to ensure that your element does not exceed or go below a certain height. They are particularly useful in ensuring, for instance, that a table does not go beyond the page width.

For example, specifying P {width: 30%; min-width: 200px} could be used to make the P 30% of the width of the containing block wide, but a minimum of 200 pixels wide.



Be the first one to comment on this page.




  CSS 2.0 eBooks
More Links » »
 
 CSS 2.0 FAQs
More Links » »
 
 CSS 2.0 Interview Questions
More Links » »
 
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 
 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 
 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.


Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties - Boxes, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
HTML Quiz
XHTML Quiz
CSS Quiz
TCP/IP Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
HLML Quiz
XML Quizzes
XML Quiz
XSL Quiz
XSLT Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XSL-FO Quiz
XML DOM Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
SOAP Quiz
WSDL Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
DHTML Quiz
HTML DOM Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
PERL Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
PL/SQL Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
ADO.NET Quiz
VB.NET Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
SMIL Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
JBOSS Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
MIDI Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
ABAP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright ? 2008. Academic Tutorials.com. All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World | Important Websites
Copyright ? 2003-2024 Vyom Technosoft Pvt. Ltd., All Rights Reserved.