Separating DIVS apart from each other in CSS

hi, I'm developing an ASP.NET site and using custom controls for rounded rectangles to put stuff in on my pages. everything works in IE fine. pretty much everything works in firefox, apart from on my home page.

i have two of these controls, each in different divs, with the idea of having two rectangles on each half of the webpage (left and right). Im using a "separation" div to separate the two apart:

#separator {
      float: left;
      width: 3%;
}

IE accepts this and renders everything correctly, but FF places the first div immediately to the right of the second, ignoring the 3% gap i want between the two. any ideas how to fix this?
LVL 2
chris_smith_51Asked:
Who is Participating?
 
codeQuantumCommented:
A sample of the HTML code would be helpful too. What is inside the separator?

It might be because the separator is empty. Try using   inside.
0
 
codeQuantumCommented:
It depends on so many things... we need more information.

In the meantime, try this code :
#separator {
      float: left;
      width: 3%;
      display: block;
}

Open in new window

0
 
chris_smith_51Author Commented:
thanks but no luck unfortunately.
what info do you need exactly? maybe the css of the divs themselves? im dealing with so much code i dont want to post irrelevant info. but maybe this is helpful:


#body-left {
	float: left;
	width: 30%;
}
 
#separator {
	float: left;
	width: 3%;
	display: block;
}
 
#body-center {
	float: left;
	width: 30%;
}

Open in new window

0
 
icedesignstudiosCommented:
An easier solution would be to apply a margin on one of the rectangles. This would save a little bit of code, and you would have one less <div> element. I tested the code out below and it renders the same in Firefox and Explorer.

What it does is apply a 3% margin-right to the div on the left, so the the other rectangle does line up next to it.

Hope that helps =)
<style type="text/css">
<!--
#body-left {
        float: left;
        width: 30%;
		margin-right: 3%;
}
 
#body-center {
        float: left;
        width: 30%;
}
-->
</style>

Open in new window

0
 
chris_smith_51Author Commented:
thanks for the responses. it was because nothing was inside the separator div. the last solution was more elegant though so i hope you are happy with the point split. :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.