Spacing between side by side divs uneditable? - css

Question

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;
}

Answer 1

The div
<div id="company_info">
Is not floating, but the div to the left of it with id=scroller is.
For a quick solution, you will need to make #company_info:
#company_info {
float: left;
width: 70%;
margin-left: 20px;
}
Also make sure to clear float after those two divs!

Answer 2

You didn't post HTML so I made my own markup, with the parameters you were looking for:
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