i can't figure out why this css is not working
thirtydot edit: (there's no doctype)
Here is the code in pastebin: http://pastebin.com/zwPTd8dd
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Layout</title>
<style type="text/css">
#wholepage{
background: #fff;
width: 960px;
margin: 0 auto;
}
#header{
width: 960px;
margin: auto 0;
}
#header ul{
border:1px solid #bbbbbb;
width:100%;
height:45px;
-moz-border-radius:8px;
-webkit-border-radius: 4px;
list-style: none;
}
#header ul li{
float: left;
margin: 3px;
}
#login-form{
position: relative;
margin-left: 750px;
margin-right: -20px;
border: 1px solid #4e4e4e;
}
#frontpage-content{
position: relative;
margin-right: 210px;
border: 1px sol开发者_运维问答id #bbbbbb;
}
</style>
</head>
<body>
<div id="wholepage">
<div id="header">
<ul>
<li>Home</li>
<li>Profile</li>
<li>username
<input type="text"/>
</li>
<li>password
<input type="password" />
</li>
<li><input type="submit" value="login"/>
</ul>
</div>
<div id="login-form">
widget 1 : description of widget one here ...
</div>
<div id="login-form">
widget 2 : description of widget two here...
</div>
<div id="frontpage-content">
content here<br/>
content here<br/>
</div>
<p>Terms of use | Contact | About | Developers | Advertising | Services | Partners</p>
</div>
</body>
</html>
It's pushing down the "frontpage-content" div. I've been trying to fix this for a long time. I have no more ideas. :(
This problem is solved. Thank you Guys for helping.
I'm assuming judging from how you've got the margins set that you want frontpage-content to be to the right of the login-form widgets?
If so, you're missing the CSS value for "float". I'd put all your sidebar content in a div with the id like "left-sidebar" and make it
#left-sidebar {
width: 200px;
float: left;
}
#frontpage-content{
position: relative;
width: 750px;
float: right;
border: 1px solid #bbbbbb;
}
#login-form{
position: relative;
width: 100%;
border: 1px solid #4e4e4e;
}
And in your source after #frontpage-content, place:
<div style="clear:both;"></div>
before your footer stuff.
Fixed: http://jsfiddle.net/Mutant_Tractor/xNAaz/2/
Sure just add position:fixed; and bottom:0; to it's class.
I think this is what you are looking for... http://jsfiddle.net/ZsjDL/2/
Floats can be tricky. Make sure you define width on floated elements and ids should not exist more than one time in your markup.
加载中,请稍侯......
精彩评论