HTML/CSS/Box Model/width

Материал из Web эксперт
Перейти к: навигация, поиск

A div with auto width expands horizontally filling the whole available area.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title> div with auto width </title>
       <style type="text/css" media="all">
           div {
             width: auto;
             border: thin solid black;
           }
       </style>
   </head>
   <body>

this is a test. 

   </body>

</html> 

</source>


Aligned and Offset Static Table

   <source lang="html4strict">

<!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"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .l-wrap {
 width: auto;
 margin-left: 0;
 margin-right: auto;
 background: red;

} </style> </head> <body>

Left-aligned Shrinkwrapped Table

</body> </html> 

</source>


Centered Shrinkwrapped Table

   <source lang="html4strict">

<!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"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .c-wrap {
 width: auto;
 margin-left: auto;
 margin-right: auto;
 background: yellow;

}

</style> </head> <body>

Centered Shrinkwrapped Table

</body> </html> 

</source>


Default width

   <source lang="html4strict">

<!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"> 

   <head>
       <title>width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 4px;
   background: yellow;

} 

       </style>
   </head>
   <body>

           Auto width on a block element.

   </body>

</html> 

</source>


Fixed Width CSS

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

 <head>
   <title>Fixed Width CSS</title>
   <style rel="stylesheet" type="text/css">

body { 

 background-color: #efefef;
 font-family: arial, verdana, sans-serif;

} div#page { 

 width: 700px;
 background-color: #ffffff;
 border-style: solid;
 border-width: 1px;
 border-color: #666666;
 padding: 20px;
 font-size: 12px;

} </style> 

 </head> 
 <body>

Sample Web Page

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec sem. 

 </body>

</html> 

</source>


floats and percentage width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           div#container {
               margin: 0 20px;
               background: red;
           }
           div#float {
               background: blue;
               float: left;
               border: 1px solid black;
               width: 75px;
               height: 50px;
           }
           div#follow {
               margin-left: 77px;   
           }
           table {
               border: 1px solid black;
               width: 100%;
           }
           td {
               border: 1px solid black;
           }
       </style>
   </head>
   <body>

               Float text.

                           Table text.

   </body>

</html> 

</source>


Left-aligned Shrinkwrapped Table

   <source lang="html4strict">

<!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"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" title="text/css"> .parent { 

 width: 600px;
 height: 600px;
 background: black;

}

  • .l-wrap {
 width: auto;
 margin-left: 0;
 margin-right: auto;
 background: red;

} </style> </head> <body>

Left-aligned Shrinkwrapped Table

</body> </html> 

</source>


Margin and width

   <source lang="html4strict">

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Demonstration of text-align: center</title> <style type="text/css"> p { 

 width: 50%;

} </style> </head> <body>

this is a test. this is a test.

this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Set the total width to 50%

   <source lang="html4strict">

<!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. outer1 {
   width:50%;

}

  1. left{
 float:left;
 width:150px

}

  1. centre{
 margin-left:155px;
 margin-right:155px;

}

  1. right {
width:150px;
float:right;

} </style> </head> <body>

Left content
This is the centre content : This is the centre content : 
     This is the centre content : This is the centre content : This is the centre
content : This is the centre content :

</body> </html> 

</source>


Set width to auto for an anchor with LI under UL in a DIV

   <source lang="html4strict">

<!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"> <head> <title></title> <style type="text/css">

html>body #navsite ul li a { 

width: auto;

} </style> </head> <body id="pagespk">

</body> </html> 

</source>


static width and centered

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html><head><title></title> <style type="text/css"> 

 #frame {
   width:650px;
   margin-right:auto;
   margin-left:auto;
   margin-top:10px;
   padding:0px;
   text-align:left;
   background:#aaa;
   }
   
 #contentleft {
   width:175px;
   padding:0px;
   float:left;
   background:#bbb;
   }
 
 #contentcenter {
   width:300px;
   padding:0px;
   float:left;
   background:#eee;
   }
 
 #contentright {
   width:175px;
   padding:0px;
   float:left;
   background:#ccc;
   }
 
 #contentheader {
   background:#ddd
   }
   
 p,h1,pre {
   margin:0px 10px 10px 10px;
   }
   
 h1 {
   font-size:14px;
   padding-top:10px;
   }
   
 #contentheader h1 {
   font-size:14px;
   padding:10px;
   margin:0px;
   }
 
 #contentright p { font-size:10px}

</style> </head><body>

static width and centered

contentleft

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

contentcenter

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

contentright

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


This div stretches across the whole window

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css" media="all">
         body {
           margin: 0;
         }
       
         div {
           width: 100%;
           color: white;
           background: black;
         }
       </style>
   </head>
   <body>

             This div stretches across the whole window.

   </body>

</html> 

</source>


Use width:auto to stretch the width of a block to the sides of its parent.

   <source lang="html4strict">

<!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"> <head> <title></title> <style type="text/css"> .container{ 

   width: 800px;
   height: 800px;
   background: pink;

}

  • .box {
 float: right;
 overflow: auto;
 visibility: visible;
 width: auto;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .small {
   right: 200px;
   width: auto;
   
   background: yellow;

} </style> </head> <body>

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html> 

</source>


width and height with percentage and html body no margin

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
             html, body {
           height: 100%;
       }
       p {
           width: 100%;
           height: 100%;
           margin:  10px;
           padding: 10px;
           border:  1px solid black;
           background: lightgray;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


width: auto

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
               p {
           border: thin solid black;
           width: auto;
           height: auto;
       }
           </style>
       </head>
       <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 

       </body>
   </html>
</source>


width:auto is the default.

   <source lang="html4strict">

<!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"> <head> <title></title> <style type="text/css"> .container{ 

   width: 800px;
   height: 800px;
   background: pink;

}

  • .box {
 float: right;
 overflow: auto;
 visibility: visible;
 width: auto;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .small {
   float: left;
   right: 200px;
   width:  auto;
   height: 300px;
   background: yellow;

} </style> </head> <body>

this is a test.
this is a test. this is a test. this is a test.
this is a test

</body> </html> 

</source>


width, height: auto

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
               table {
           border: thin solid black;
           width: auto;
           height: auto;
       }
           </style>
       </head>
       <body>

                 The table only expands enough for the content inside of it.

       </body>
   </html>
</source>


width, height: percentage, and html body no margin

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
             html, body {
           height: 100%;
       }
       p {
           width: 100%;
           height: 100%;
           margin:  10px;
           padding: 10px;
           border:  1px solid black;
           background: lightgray;
       }
           </style>
       </head>
       <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 

       </body>
   </html>
</source>


width more content than width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
       p {
           border: thin solid black;
           width: 100px;
       }
           </style>
       </head>
       <body>

oooooooooooooooooooooooooooooooooooooo! 

       </body>
   </html>
</source>


width sets the width of an element"s inner box.

   <source lang="html4strict">

<!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"> <head> <title></title> <style type="text/css">

  • .box {
 display: static;
 width: 160px;
 height: 150px;
 background-color: #ccc;

} </style> </head> <body>

Box Model

</body> </html> 

</source>


width sets the width of the element. width:auto is the default value.

   <source lang="html4strict">

<!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"> <head> <title></title> <style type="text/css">

  • .container {
 position: relative;

}

  • .box {
 position: absolute;
 overflow: auto;
 visibility: visible;
 z-index: 1;
 left: 300px;
 right: auto;
 top: 0;
 bottom: auto;
 width: 220px;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .before {
   z-index: 2;
 width: 100px;
 height: 400px;
 left: 400px;
 right: auto;
 top: 100px;
 bottom: auto;
   background: yellow;

} </style> </head> <body>

BEFORE
ABSOLUTE BEFORE
this is a test. this is a test.

</body> </html> 

</source>


width setting with more content than width

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

   <html>
       <head>
           <title></title>
           <style type="text/css">
       p {
           border: thin solid black;
           width: 100px;
       }
           </style>
       </head>
       <body>

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf 

       </body>
   </html>
</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/width&oldid=5231»