0

Alright, so I have searched the Internet, I have looked at at the very least twenty different posts on this site, and spent several hours with this issue and either I am blind, or perhaps rustier at this than I thought. I have two divs within a wrapper- the left div is float:left, and I want to space them apart from one another, but when I add padding or margin to the left side of the right div nothing happens. If I manually add space using the code for space, it pushes the paragraph down rather than over. I am at a loss, I tried using inline-block display, I tried floating the right paragraph. The only thing that sort of worked was adding right padding to the left box, but because the content in the left box is centered it then messed up the display of the left box. I uploaded the site contents so you could see what I am talking about, and the stylesheet is pasted below. Any help with this would be greatly appreciated! I usually just use tables and iframes, but I got yelled at for that so I was trying to do this the "right way" (I guess?) for a friend. http://www.djcproductions.net/GSFlook/

/* CSS Reset */
* { margin: 0; padding: 0; }

body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}

#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}

#header {
width: 1024px;
height: 88px;
}

#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}

#nav ul {
float: left;
}

#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}

#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}

#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}

#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}

#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}

#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}

#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}

.shadow{
-moz-box-shadow:    2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow:         2px 5px 5px 1px #ccc;
}

#content{
padding: 118px 0 0 33px;
}

#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}

#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}

#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f; 
}

#scroll li{
padding-top:5px;
list-style-type:none;
}

#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000; 
width: 90%;
padding: 0 0 0 0;
}

p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}
4

2 回答 2

2

div

<div id="company_info">

不是浮动的，但是 id=scroller 左侧的 div是.

为了快速解决，您需要制作#company_info：

#company_info {
float: left;
width: 70%;
margin-left: 20px;
}

还要确保在这两个 div 之后清除浮动！

于 2013-07-28T03:14:53.093 回答
0

您没有发布 HTML，所以我使用您正在寻找的参数制作了自己的标记：

HTML

<div class="container">

<div class="left">
    <p>Services</p>
</div>
<div class="right">
    <p>Our company</p>
</div>

CSS

p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
  margin: 0 auto;
  width: 620px;
  height: 400px;
  padding: 10px;
  background: #CCC;
}
.container .left {
  margin: 0 auto;
  float: left;
  width: 300px;
  height: 390px;
  background: #999;
}
.container .right {
  margin: 0 auto;
  float: right;
  width: 300px;
  height: 390px;
  background: #666;
}

jsFiddle

于 2013-07-28T03:21:47.203 回答