Pesky alignment

[el_roboto]

This is something that I always end up spending too long with.

Often a situation occurs in which I have a footer div, in which there are links to privacy policies, terms and conditions etc etc aswell as any accreditation images and our brand.

Whats the best way to organise the elements?!?

For example, I have the text links for Privacy Policies etc displaying as an inline list.

Then I've got our company brand, it's class specifies that it has a background image, and its height and width are equal to that of the image, I have it floating right and specify margins: 0 2px 0 auto.

Both elements are within a container i've called footer, which has padding on all sides of 10px.

The desired effect is that the list floats left and the brand floats right, with both vertically aligned center within the container.

What actually happens is:
The list displays fine, the brand floats right but the top of the image is vertically aligned with the baseline of the text in my list. Further to this, it appears partly outside of the container.

How would you best achieve the desired effect?

[JAB Creations]

WAI AAA requires anchors not to be directly next to each other. To avoid this at least technically put the anchors in floated divisible elements...

<div style="float: left;"><a href="#">anchor</a></div>
<div style="float: left;"><a href="#">anchor</a></div>
<div style="float: left;"><a href="#">anchor</a></div>

I'd need to see the other code to help you further though this should help some. Hmm, tables...

- John

[el_roboto]

the text anchors are in a list,

<div id="#footer"><div class="inline"><ul>
<li><a href="accessibility/">Accessibility Statement</a></li>
<li><a href="terms/">Terms &amp; Conditions</a></li>
<li><a href="privacy/">Privacy Policy</a></li>
</ul></div>
<div id="elo"><a href="ourcompanyaddress.co.uk" title="El Roboto"><span class="hiddenNav" style="height:24px;">Company Name Link</span></a></div></div>

How I want it

--this is the footer div---------------------------

link link link ---------------[small graphic]

----------------------------------------------------------

How its actually turning out is...

--this is the footer div---------------------------

link link link

----------------------------------[small graphic]---

[Dabrowski]

Can you say.....float: right?

[Setek]

Can you say.....float: right?

Don't be patronising Dabrowski, be nice :)

<div id="#footer"><div class="inline"><ul>
<li><a href="accessibility/">Accessibility Statement</a></li>
<li><a href="terms/">Terms &amp; Conditions</a></li>
<li><a href="privacy/">Privacy Policy</a></li>
</ul></div>
<div id="elo"><a href="ourcompanyaddress.co.uk" title="El Roboto"><span class="hiddenNav" style="height:24px;">Company Name Link</span></a></div></div>

You should remove the hash (#) in the ID. That part goes in the CSS rule :)

I had a question... all the links seem to be like... Utility style stuff... useful but not like someone would click on it many times.. and I'm guessing the image on the right-hand side is just a "byline" of who designed and developed the website?

Why isn't it all in one list? It seems like they're the same style of item; to do with the website in general, not any specific section...

We could streamline it then to:

<div id="footer">
<ul>
<li><a href="accessibility/">Accessibility Statement</a></li>
<li><a href="terms/">Terms &amp; Conditions</a></li>
<li><a href="privacy/">Privacy Policy</a></li>
<li id="author"><a href="urcompanyaddress.co.uk">Company Name Link</a></li>
</ul>
</div>

From there it would be a simple matter of separating the ones on the left from the ones on the right:

div#footer ul { margin: 0;
list-style-type: none; }
div#footer ul li { float: left;
display: inline; }
div#footer ul li#author { float: right; }

... and season to taste :)

P.S.: Remember that since you're using floats, you may need to clear the floats so the parent container shows up any background images or any definition that you've set.

[el_roboto]

I have no idea why I didn't realise I should just put our brand in the same list instead of trying to float it to the right as a seperate div

Patronism accepted! gives you a kick up the arse sometimes so its all good

thanks for the tips

[Dabrowski]

Sorry mate, just seemed obvious. You had everything else floated left!

Glad you got it sorted.

[el_roboto]

It's ok! hehe

I had tried just floating it right however so it was a teeth grinder ;P

The best solution was just to put that element in the list and float that li right.