float center?

@chesswillNov 15.2006

I want to position the w3 logo, sitemap and contact details link along the bottom of my pages. I want to position them the same no matter what size screen being used.

Will float left, center and right work?

~~[url]~~http://www.gordonengraving.co.uk/Perspex.html[/url]

to post a comment

CSS

@mooiNov 15.2006 — #Hello chesswill,

It will work but you're going to have to use the float attribute in a block tag like a div. You can make the <a> have "display:block" but I would suggest using a div tag because that is what they are for.

?

@KDLANov 15.2006 — #You could style them as an inline list, with padding based on percentages to space them.

KDLA

@ray326Nov 15.2006 — #There is no float:center.

@_Aerospace_Eng_Nov 15.2006 — #Something like this should work

&lt;ul id="bottom"&gt;
 &lt;li&gt;&lt;a href="sitemap.html"&gt;sitemap&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://validator.w3.org/check?uri=referer"&gt;&lt;img border="0"
 src="http://www.w3.org/Icons/valid-html401"
 alt="Valid HTML 4.01!" height="31" width="88"&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.html#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

#bottom {
 margin:0;
 padding:0;
 list-style:none;
 text-align:center;
 height:31px;
 }
 #bottom li {
 width:33.3%;
 float:left;
 height:31px;
 line-height:31px;
 }

@ray326Nov 15.2006 — #Or a slight variant for the text alignment.

[code=html]
 .left { text-align:left; }
 .center { text-align:center }
 .right { text-align:right }
 
 <ul id="bottom">
 <li class="left"><a href="sitemap.html">sitemap</a></li>
 <li class="center"><a href="http://validator.w3.org/check?uri=referer"><img border="0"
 src="http://www.w3.org/Icons/valid-html401"
 alt="Valid HTML 4.01!" height="31" width="88"></a></li>
 <li class="right"><a href="index.html#contact">contact</a></li>
 </ul>
 [/code]

float center?

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

float center?

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴