HTML/CSS/Layout/Liquid Layout
Содержание
Elastic Layout with floating
<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>Elastic Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0; font-size: 62.5%;
}
- wrapper {
font-size: 1.4em; width: 56em; margin: 10px auto; text-align: left; background: #dade75; border: 1px solid silver;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
float: right; background: #fff; width: 40em;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
width: 15em; 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. 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.
</body> </html>
</source>
Elastic Layout - with maximum 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> <title>Elastic Layout - with maximum width</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {
margin: 0; padding: 0; text-align: center; background: #f0f0f0; font-size: 62.5%;
}
- wrapper {
font-size: 1.4em; width: 56em; max-width: 95%; margin: 10px auto; text-align: left; background: red; border: 1px solid silver;
}
- header {
background: gold; padding: 10px 15px 10px 13px;
}
- content-wrapper {
float: right; background: #fff; width: 73%; max-width: 73%;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
width: 25%; max-width: 25%; 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. 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>
Liquid Layout - fixed left and right columns
<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>Liquid Layout - fixed left and right columns</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {
margin: 10px 40px; padding: 0; text-align: center; background: gold;
}
- wrapper {
text-align: left; background: red; border: 1px solid silver;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
float: right; background: #fff; width: 75%;
}
- content-inner {
width: 70%; padding: 10px 0 10px 15px; float: left;
}
- navigation {
width: 25%; float: left; padding-top: 15px;
}
- related {
float: right; width: 25%;
}
- related ul {
margin: 0; padding-left: 15px;
}
- related h2 {
font-size: large;
}
- footer {
clear: both;
} </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.
</body> </html>
</source>
Liquid Layout without width setting
<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>Liquid Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {
margin: 10px 40px; padding: 0; text-align: center; background: #f0f0f0;
}
- wrapper {
text-align: left; background: #dade75; border: 1px solid silver;
}
- header {
background: #272727; padding: 10px 15px 10px 13px;
}
- content-wrapper {
background: #fff; float: right; width: 75%;
}
- content-inner {
padding: 5px 15px 0 15px;
}
- navigation {
width: 25%; 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. 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>
