[jonnekke]

Hi there..

I got this css to set the parameters of my divs:

Code:

#footer  { width: 792px; height: 36px;  margin: 0; padding: 0; }
#bottom  { height: 10px; margin: 0; padding: 0px 0px 0px 0px; float:left; margin-left: auto; margin-right: auto; }

#bottomlink  { margin: 0; padding: 3px 8px 0px 8px; float: left; border: 0px solid #ff00ff; display: inline; }
#divider  { width: 1px; height: 13px; margin: 0; padding: 0px 0px 0px 0px; float: left; background-color: #636161;}

This is the html that belongs to this:

HTML Code:

<div id="footer">
	<div id="bottom">
		<div id="divider"></div>
		<div id="bottomlink"><a href="#" class="footer">contact</a></div>
		<div id="divider"></div>
		<div id="bottomlink"><a href="#" class="footer">algemene verkoopvoorwaarden</a></div>
		<div id="divider"></div>
		<div id="bottomlink"><a href="#" class="footer">disclaimer</a></div>
		<div id="divider"></div>
	</div>
</div>

What should happen is that "bottom" is centered inside "footer"
I thought delete the float parameter in the "bottom" parameters should do
the job, but then the width of "bottom" is set to 792px.
And that is not making it center.

It's not possible to set the width of "bottom" (which would do the job)
because the text showed there is variable.

who can help me out here...

_j

[forgueam]

Jonnekke,

This is probably the way I would do it:

CSS:

Code:

#footer  { width: 792px; height: 36px;  margin: 0; padding: 0; text-align: center; }

#footer ul { list-style: none; margin: 0; padding: 0; }
#footer ul li { border-left: 1px solid #636161; display: inline; height: 13px; margin: 0; padding: 3px 8px 0px; }
#footer ul li.last { border-right: 1px solid #636161; }

HTML:

Code:

<div id="footer">
	<ul>
		<li><a href="#" class="footer">contact</a></li>
		<li><a href="#" class="footer">algemene verkoopvoorwaarden</a></li>
		<li class="last"><a href="#" class="footer">disclaimer</a></li>
	</ul>
</div>

By placing the links in an unordered list, your code becomes much more semantic, easier to read, and less sizeable. Hope this helps!

[harish]

#bottom { clear:both; height: 10px; margin: 0; padding: 0px 0px 0px 0px; float:left; margin-left: auto; margin-right: auto; }

Clear both
It’s also important to set your clear property in the #bottom declaration to both, so that
regardless of the length of either column, the footer will always appear below the
columns.
The results should appear identical to Figure 12-4, yet the order of the markup has been
improved.