When the css overflow is set on my content, the div slides down_问答_开发者

When the css overflow is set on my content, the div slides down

开发者 https://www.devze.com 2023-03-22 12:52 出处：网络

I\'ve got the following html <!DOCTYPE HTML> <html> <head> <title>Title</title>

相关专题：css

I've got the following html

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <meta http-equiv="Content-Language" content="de" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="mainframe">
      <ul>
        <li><a href='news.shtml'><img src='tastenews.jpg' alt='News'/></a></li>
        <li><a href='demo.shtml'><img src='tastedemos.jpg' alt='Demos'/></a></li>
        <li><a href='index.shtml'><img src='tastehome.jpg' alt='home'/></a></li>
      </ul> 
      <div id="content">
        <h1>News</h1>
        <div class="news">
           <p class="date">10. April 2011</p>
           <p>
         First News
           </p>
        </div>

        <div class="news">
           <p class="date">09. Feb. 2011</p>
           <p>
         Second News
           </p>
        </div>

        <!-- etc... -->
    </div>
  </body>
</html>

With the following style:

body
{
background-color:black;
text-align:center;
margin:50px 0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
}

#mainframe
{
width:940px;
margin:0px auto;
text-align:left;
padding:15px;
}

#content
{
position: relative;
top: 0;
background-i开发者_如何学Cmage:url('hintergrund.jpg');
height:491px;
width:800px;
overflow:auto;
}

.news .date
{
font-weight:bold;
float:left;
width:150px;
}

ul
{
float:right;
list-style:none;
margin:1px; 
}

img
{
border:0;
}

If the content of the content div exceed the 491px height, the it is pushed down under the level of the last menu button. Why does it do so, and how can I correct it? I've tested with Firefox and Safari under MAC OS X.

Your issue seems to be that the ul has 40px of left padding, which is making the remaining space too narrow for the content area. Try adding a rule to the ul to remove the unnecessary padding:

ul {
    padding:0;
    float: right;
    list-style: none outside none;
    margin: 1px;
}

You need to clear after ul... Just use a clear class and use it after ul like this

Clear class will be like this

.clear { clear: both: }

When the css overflow is set on my content, the div slides down

精彩评论

关注公众号

热门标签

图文推荐

When the css overflow is set on my content, the div slides down

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：