Is this the correct way to use multiple CSS floats?
I am unsure if I can use floats in the manner I have. Be grateful for any advise if I have done it incorrectly.
NOTE
I plan to migrate the internal stylesheet to an external stylesheet once I have completed the layout as well as the competion of the meta data, etc
<!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" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" 开发者_JS百科/>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" media="all" href="" />
<style type="text/css" media="all">
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #000000;
}
#wrapper {
width: 600px;
margin: 0px auto;
}
#propertydesc {
background-color: #e5e8ed;
padding: 10px;
}
#content {
float: left;
}
#propertyinfo {
float: right;
}
.cls {
clear: both;
}
#agent {
float: right;
}
</style>
<title>Sample Template</title>
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="logo.png" width="100" height="157" /></div>
<div id="propertydesc">property description</div>
<div id="hero">hero</div>
<div id="content"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
<div id="propertyinfo">property info</div>
<div class="cls"></div>
<div id="agent">agent</div>
<div class="cls"></div>
<div class="contact">contact</div>
</body>
</html>
EDIT
I updated my code to help overcome the issue of having the agent div tag appear below the property info div tag however am unsure if it is correct.
<!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" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" media="all" href="" />
<style type="text/css" media="all">
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #000000;
}
#wrapper {
width: 600px;
margin: 0px auto;
}
#propertydesc {
background-color: #e5e8ed;
padding: 10px;
}
#content {
float: left;
width: 200px;
}
p {
margin-top: 10px;
margin-bottom: 10px;
}
#propertyinfo {
/* float: right; */
margin-left: 400px;
background-color: #e5e8ed;
width: 200px;
}
#agent {
float: right;
background-color: #e5e8ed;
width: 200px;
}
.cls {
clear: both;
}
</style>
<title>Sample Template</title>
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="logo.png" width="100" height="157" /></div>
<div id="propertydesc">property description</div>
<div id="hero">hero</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="propertyinfo">property info</div>
<div id="agent">agent</div>
<div class="cls"></div>
<div class="contact">contact</div>
</body>
</html>
Your HTML is not valid, check this -> http://validator.w3.org/
My suggestions: Try to build more general, nested markup for layout purposes. You have very specific markup, thats not wrong but on the long way you'll get many problems with floats especially with crossbrowser issues. I think its a good idea to use floats rarely on more generic markup. Here is an example for a simple two-column layout. With this you can remove:
<div class="cls"></div>
and avoid crossbrowser issues (older IE).
Many problems occur due to poor nested markup.
HTML
<div class="two-col">
<div class="first-col">
// your specific markup goes here
</div>
<div class="second-col">
// your specific markup goes here
</div>
</div>
CSS
.two-col,
.second-col {
overflow: hidden; /* enclose the float, so .second-col dont need any margin */
zoom: 1; /* hasLayout IE */
}
.first-col {
float: left;
}
There is nothing particularly wrong with the way you are using floats. My only suggestion would be to start giving widths to your floated elements.
If you can speak more to any issues you are seeing or specific problems you are having, I can help you more.
加载中,请稍侯......
精彩评论