4 replies [Last post]
mdd4696
mdd4696's picture
Offline
Regular
Buffalo, NY, USA
Last seen: 18 years 20 weeks ago
Buffalo, NY, USA
Timezone: GMT-4
Joined: 2004-05-18
Posts: 13
Points: 0

Hello all,

I have a problem that I can't seem to work out. It would be quite easy to implement with tables, but I have no idea how to use CSS for the equivalent.

Basically, I want a section of text aligned left within a 75% width div. Then, in the remaining space (to the right) I want some more text centered.

This is how I would implement this using HTML:

<table style="margin-left: auto; margin-right: auto;" width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">mdd4696</td>
<td align="center" width="100%">Section 1</td>
</tr>
</table>

Here is my current implementation with CSS:

<div style="padding: 0px; margin-left: auto; margin-right: auto; width: 75%;">
<span style="width: 10%;">mdd4696</span>
<span style="margin-left: 15%; margin-right: auto;">Section 1</span>
</div>

Clearly my CSS does not function as I would like it to. How can I accomplish the desired functionality? Also, do I need the enclosing DIV, or is that superfluous?

Thanks all!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS equivalent: ALIGN=&quot;CENTER&quot;

Hi mdd4696,
You should really use divs instead of spans.
Then I would float them so they sith on the same line.
It would be best to have your percentage values add to slightly less then 100% if you float.

Hope that helps

mdd4696
mdd4696's picture
Offline
Regular
Buffalo, NY, USA
Last seen: 18 years 20 weeks ago
Buffalo, NY, USA
Timezone: GMT-4
Joined: 2004-05-18
Posts: 13
Points: 0

Followed your reccomendations...

I've followed your reccomendations, however, I still need some guidance regarding the centering part. I've added margin-left: auto; margin-right: auto; to the text I would like to center, but it doesn't affect it.

I would like the 'Section 1' to be centered in the space remaining next to the mdd4696. See:

http://www.rit.edu/~mdd4696/dev2.html
(pardon the ugly code)

Advice anyone?

steve-0
Offline
newbie
Last seen: 18 years 20 weeks ago
Timezone: GMT-9
Joined: 2004-05-20
Posts: 5
Points: 0

{text-align: center;}

Have you tried text-align: center;
?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 48 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: Followed your reccomendations...

mdd4696 wrote:
I've followed your reccomendations, however, I still need some guidance regarding the centering part. I've added margin-left: auto; margin-right: auto; to the text I would like to center, but it doesn't affect it.

I would like the 'Section 1' to be centered in the space remaining next to the mdd4696. See:

http://www.rit.edu/~mdd4696/dev2.html
(pardon the ugly code)

Advice anyone?

Hi

In order for this to work, using auto's, the browser needs a width of some sort as well.

Trevor