HTML/CSS/Layout/fixed width layout
Содержание
fixed width float and clear
<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>Fixed Width Layout - fixed height</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0;
}
- wrapper {
text-align: left; width: 770px; margin: 10px auto 0 auto; background: #dade75; border: 1px solid silver;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
width: 570px; float: right; background: #fff;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
width: 200px; float: left; padding-top: 15px;
}
- footer {
clear: both;
} </style> </head> <body>
this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Fixed Width Layout - Fixed height to solve left column problem
<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>Fixed Width Layout - Fixed height to solve left column problem</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0;
}
- wrapper {
text-align: left; width: 770px; margin: 10px auto 0 auto; position: relative; height: 600px; background: #fff;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
width: 570px; position: absolute; left: 200px;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
position: absolute; width: 200px; padding-top: 15px;
} </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>
Fixed Width Layout - Left column not stretching
<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>Fixed Width Layout - Left column not stretching</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0;
}
- wrapper {
text-align: left; width: 770px; margin: 10px auto 0 auto; position: relative;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
width: 570px; background: #fff; position: absolute; left: 200px;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
position: absolute; width: 200px; padding-top: 15px; background: #dade75;
} </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>
Fixed Width Layout - Outer container collapsed
<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>Fixed Width Layout - Outer container collapsed</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0;
}
- wrapper {
text-align: left; width: 770px; margin: 10px auto 0 auto; background: #dade75; border: 1px solid silver;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
width: 570px; float: right; background: #fff;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
width: 200px; float: left; padding-top: 15px;
} </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>
