{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Dimension Properties Tutorials

CSS allows you to set the dimension (width and height) of HTML elements.

CSS Dimension Properties

Property Description Values CSS level
height Sets the height of an element auto
length
%
inherit 		CSS level 1
max-height Sets the maximum height of an element none
length
%
inherit 		CSS level 2
max-width Sets the maximum width of an element none
length
%
inherit 		CSS level 2
min-height Sets the minimum height of an element length
%
inherit 		CSS level 2
min-width Sets the minimum width of an element length
%
inherit 		CSS level 2
width Sets the width of an element auto
length
%
inherit 		CSS level 1

How To Set the Height and Width of HTML Elements.

The height and width properties allows you to set the dimension of HTML elements.

The code example below shows you how to set the height and width of HTML elements.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div.one { width:300px; height:300px; margin:5px; border:2px solid black; } div.two { width:800px; height:200px; margin:5px; border:2px solid red; } </style> <body> <div class="one"> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </div><!-- end class one --> <div class="two"> This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. </div><!-- end class two --> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

How To Set the Height and Width of Images

CSS allows you to control the height and width of images.

The code example below shows you how to set the height and width of images.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> img.small { height:200px; width:200px; } img.big { height:800px; width:800px; } </style> <body> <p> The height of the width image that is being worked with (shown below) has a height of 400 pixels and a width of 400 pixels. </p> <p> <img src="image.gif" alt="image" /> </p> <p> The image below has a height of 200 pixels and a width of 200 pixels. </p> <p> <img class="small" src="box_model.gif" alt="image" /> </p> <p> The image below has a height of 800 pixels and width of 800 pixels. </p> <p> <img class="big" src="box_model.gif" alt="image" /> </p> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

How To Set the Maximum Height of HTML Elements

The max-height property allows you to set the maximum height of HTML elements.

The code example below shows you how to set the minimun height and width of HTML elements.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { margin:10px; border:2px solid black; } div.max { max-height:50px; } </style> <body> <div> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </div><!-- end class --> <div class="max"> This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. </div><!-- end class max --> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

How To Set the Minimum Height of HTML Elements

The min-height property allows you to set the minimum height of HTML elements.

The code example below shows you how to set the minimum height and width of HTML elements.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { margin:10px; border:2px solid black; } div.min { min-height:50px; } </style> <body> <div> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </div><!-- end class --> <div class="min"> This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. </div><!-- end class min --> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

How To Set the Maximum Width of HTML Elements

The max-width property allows you to set the maximum width of HTML elements.

The code example below shows you how to set the maximum width and width of HTML elements.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { margin:10px; border:2px solid black; } div.max { max-width:400px; } </style> <body> <div> This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </div><!-- end class --> <div class="max"> This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. This is some more content. </div><!-- end class max --> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

How To Set the Minimum Width of HTML Elements

The min-width property allows you to set the minimum width of HTML elements.

The code example below shows you how to set the minimum width and width of HTML elements.

<!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="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> div { min-width:200px; margin:10px; border:2px solid black; } </style> <body> <div> This is some content. </div><!-- end class --> </body> </html>

The web page that the code example creates is here: CSS Height and Width Properties Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends