HTML/CSS/Box Model/width
Содержание
- 1 A div with auto width expands horizontally filling the whole available area.
- 2 Aligned and Offset Static Table
- 3 Centered Shrinkwrapped Table
- 4 Default width
- 5 Fixed Width CSS
- 6 floats and percentage width
- 7 Left-aligned Shrinkwrapped Table
- 8 Margin and width
- 9 Set the total width to 50%
- 10 Set width to auto for an anchor with LI under UL in a DIV
- 11 static width and centered
- 12 This div stretches across the whole window
- 13 Use width:auto to stretch the width of a block to the sides of its parent.
- 14 width and height with percentage and html body no margin
- 15 width: auto
- 16 width:auto is the default.
- 17 width, height: auto
- 18 width, height: percentage, and html body no margin
- 19 width more content than width
- 20 width sets the width of an element"s inner box.
- 21 width sets the width of the element. width:auto is the default value.
- 22 width setting with more content than width
A div with auto width expands horizontally filling the whole available area.
<!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>
<div>
this is a test.
</div>
</body>
</html>
Aligned and Offset Static Table
<!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>
<div class="parent">
<table class="l-wrap"><tr><td>Left-aligned Shrinkwrapped Table</td></tr></table>
</div>
</body>
</html>
Centered Shrinkwrapped Table
<!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>
<div class="parent">
<table class="c-wrap"><tr><td>Centered Shrinkwrapped Table</td></tr></table>
</div>
</body>
</html>
Default width
<!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>
<div>
Auto width on a block element.
</div>
</body>
</html>
Fixed Width CSS
<?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>
<div id="page">
<h1>Sample Web Page</h1>
<p>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. </p>
<p>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. </p>
</div>
</body>
</html>
floats and percentage width
<!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>
<div id="container">
<div id="float">
Float text.
</div>
<div id="follow">
<table>
<tr>
<td>
Table text.
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Left-aligned Shrinkwrapped Table
<!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>
<div class="parent">
<table class="l-wrap"><tr><td>Left-aligned Shrinkwrapped Table</td></tr></table>
</div>
</body>
</html>
Margin and width
<!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>
<p style="margin-left: auto; margin-right: auto;">this is a test. this is a test. </p>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
Set the total width to 50%
<!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">
#outer1 {
width:50%;
}
#left{
float:left;
width:150px
}
#centre{
margin-left:155px;
margin-right:155px;
}
#right {
width:150px;
float:right;
}
</style>
</head>
<body>
<div id="outer1">
<div id="outer2">
<div id="left">Left content</div>
<div id="right">Right content</div>
<div id="centre">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 : </div>
</div>
</div>
</body>
</html>
Set width to auto for an anchor with LI under UL in a DIV
<!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">
<div id="navsite">
<h5>Site navigation:</h5>
<ul>
<li><a href="" id="linkhom">Home</a></li>
<li><a href="" id="linkabt">About</a></li>
<li><a href="" id="linkarh">Archives</a></li>
<li><a href="" id="linkwri">Writing</a></li>
<li><a href="" id="linkspk">Speaking</a></li>
<li><a href="" id="linkcnt">Contact</a></li>
</ul>
</div>
</body>
</html>
static width and centered
<!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>
<div id="frame">
<div id="contentheader"><h1>static width and centered</h1></div>
<div id="contentleft">
<h1>contentleft</h1>
<p>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. </p>
</div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>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. </p>
</div>
<div id="contentright">
<h1>contentright</h1>
<p>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.
</p>
</div>
</div>
</body>
</html>
This div stretches across the whole window
<!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>
<div>
This div stretches across the whole window.
</div>
</body>
</html>
Use width:auto to stretch the width of a block to the sides of its parent.
<!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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
width and height with percentage and html body no margin
<!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>
<p>
This is a test. This is a test.
</p>
</body>
</html>
width: auto
<!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>
<p>
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.
</p>
</body>
</html>
width:auto is the default.
<!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>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
width, height: auto
<!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>
<table>
<tr>
<td>
The table only expands enough for the content inside of it.
</td>
</tr>
</table>
</body>
</html>
width, height: percentage, and html body no margin
<!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>
<p>
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.
</p>
</body>
</html>
width more content than width
<!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>
<p>
oooooooooooooooooooooooooooooooooooooo!
</p>
</body>
</html>
width sets the width of an element"s inner box.
<!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>
<h1>Box Model</h1>
<div class="box"></div>
</body>
</html>
width sets the width of the element. width:auto is the default value.
<!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>
<div class="container">
<div>BEFORE</div>
<div class="before">ABSOLUTE BEFORE</div>
<div class="box">this is a test. this is a test. </div>
</div>
</body>
</html>
width setting with more content than width
<!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>
<p>
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</p>
</body>
</html>