3 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Hey,

I'm working on the footer for the new site

(you can look at what it should look like at www.cdc-ccl.gc.ca and then choose english or french)

If you notice on the footer there is a "Last Updated: 04-05-2020" and there is an "Important Notices"

Both are on the same line which would be easy with tables but I can't see to do it in CSS

So far my footer has two divs: foot-top and foot-bot and those two elements have to be in foot top. I tried a few things but they just don't work.

Any suggestioin?

Seb

"Don't worry about Blank let me worry about Blank"

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 40 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

aligning text differently in the same div

This should do it:

CSS:

.left {float: left; text-align: left; width: 50%;}
.right {float: right; text-align: right; width:50%;}	

Then just have:

HTML:
<span class="left">Last Updated/span> <span class="right">Important Notices</span>

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

aligning text differently in the same div

A similar approach is to use a more semantic set of tags.

#footer {
    text-align: right;
    }

#footer span {
    width: 50%;  /*some browser don't handle floats well
                   without a specified width*/
    float: left;
    text-align: left;
    }
-----------
<p id="footer">
  <span>Important Notices</span>Avis importants
</p>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 13 years 18 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

aligning text differently in the same div

Thanks for the help hellsbells it works the only difference between your code and mine was that I was trying to use a div instead of a span >.<

As for your code Gary thanks, I might try that out next time, needs less code then my previous attempt.

Seb

"Don't worry about Blank let me worry about Blank"