i can't figure out why this css is not working_问答_开发者

i can't figure out why this css is not working

开发者 https://www.devze.com 2023-02-13 13:09 出处：网络

thirtydot edit: (there\'s no doctype) Here is the code in pastebin: http://pastebin.com/zwPTd8dd <html>

相关专题：css

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: