css div floating

我在容器内有两个<div>标签。其中一个向右浮动，另一个向左浮动。我试图将它们排成一排，但问题是右边的在左边的下面，根本不漂浮。

http://tinkerbin.com/QuHxRQXO

检查这个小提琴。

它不是漂浮在右边，因为你正在给你的div填充，这使得你的.rightsidediv降到底部。而不是给div填充，给内部元素填充。

而不是给你div px给百分比。它可以帮助您了解模式。

我从您的div 中删除了填充，并在内部元素中添加了填充，如下所示。

h4,p{padding:5px;}

It  is working fine. I have checked except.
change
<font color= "#FFFFFF"><b>Site Contents</b>
 to
<font color= "#FFFFFF"><b>Site Contents</b></font>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<style type="text/css">
.subcontent{width:750px;}
.menu {
background-color :#FFD700;
float: left;
padding-bottom: 100px;
width:170px;
font-family: Verdana;
font-size: 12px;
}
.rightside {
background-color: #FFF;
float:left;
width:540;
padding-left:10px;
}
</style>
</head>
<body>
<div class="subcontent">
<div class="menu">
    <div class="submenu"  style= "background-color:#A80000; text-align:center; width:120px; padding:10px"> 
        <font color= "#FFFFFF"><b>Site Contents</b></font>
    </div>
    <h4><b>Virtual Tour</b></h4>
    <P>Explore the lab to know the insights of the new world!</p>
    <h4><b>Experiments</b></h4>
    <P>There is lot more to it that would fascinate you.</P>
    <h4>Lab History</h4>
    <P> Find out the need to make it underground.</P>
 </div>
 <div class = "rightside">
      <div id="separator" style="background-color: #A80000; height: 20px">
      </div>
          <p id="para1"> Located 2,341 feet beneath the surface in an old iron mine, the lab is deep enough that particle physics experiments see less than 100,00 times the cosmic radiation than on the surface, allowing sensitive searches for exotic particles like neutrinos and dark matter.</P>
     </div>
  </div>
 </body>
</html>

相关内容

最新更新

热门标签：