Floats layered on top? 1

[OsakaWebbie]

I often run into pages that, due to CSS problems, have blocks writing on top of one another. But now that I actually want to do that, I can't figure out how.

Here's my code, with some borders added so that I can see what's going on (it's part of a Joomla template, but the question is pure CSS):

		<div id="footer">
			<div class="syndicate" style="border:1px solid white">
				<jdoc:include type="modules" name="syndicate" />
			</div>
			<div class="design" style="border:1px solid yellow">
				Design & content by OIC members<br /><?php echo JText::_('Powered by');?> <a href="[URL unfurl="true"]http://www.joomla.org/">Joomla!</a>[/URL]
			</div>
			<div class="copyright" style="border:2px solid red">
				&copy; 2004-2008 Osaka International Church<br />
				2-26-47-407 Tamatsukuri, Chuo-ku, Osaka 540-0004 Japan
			</div>
		</div><!-- footer -->

And here is the relevent CSS:

#footer {
background:darkcyan;
color:#fff;
padding:5px;
text-align:center;
border-top:solid 4px #000;
}

#footer .syndicate {
float:left;
width:30%;
display:block;
text-align:left;
}

/* #footer .copyright {
float:left;
width:100%;
display:block;
text-align:center;
} */

#footer .design {
float:right;
width:30%;
display:block;
text-align:right;
}

You can see it in action here:

http://oicjapan.org/joomla

(I have other issues with the template that I am trying to resolve, so just ignore any craziness you might see in the upper portion of the page.)

I also tried commenting out the "copyright" div around the centered text so that the text was just in the overall footer div. But either way, the syndicate div (which currently has no content, as I'm not yet using that Joomla module) and the design div consume space that the centered text avoids. In FF the blank syndicate block has no height, so the centered text centers in the left 2/3 of the footer, and in IE the blank block has height, so the two lines of the centered text are skewed. I want the centered text to stay in the center regardless of what else exists or not - yes, I know that if the user makes the font really big, stuff will overlap, but that's okay. How can I get the two side divs to just layer on top of the area that the middle text gets written in? Apparently "display:block;float:left-or-right" is not the right method. Thanks for putting up with my newbie lack of understanding of floats and other CSS positioning things.

 

[Vragabond]

If you float elements, then other elements around the floated element will respect the floated element's proportions and wrap around it. Since you do not want that, floats are not the way to go for you.

In your scenario I would suggest absolute positioning. It does exactly what you want. Just relatively position (without any coordinates, just give it positioning) the footer to provide the canvas for the inner elements, and then absolutely position both side divs, to left: 0; and right: 0; respectively. You can keep the main text in the footer itself (give it text-align: center or add another paragraph for that text.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[OsakaWebbie]

Thanks! :-D That did the trick nicely. And I discovered that it also eliminated the need to specify a width - the divs seem to size themselves to their content, which is something else I have been having trouble doing with CSS. No matter how much I try to study CSS positioning, I can't seem to get my brain completely around it, but this little episode was a major step forward in understanding, thanks to you.