CSS help required

[notfred]

on this page, how in the hell can I move the page numbers to the right edge of the blue frame?

Everybody keeps saying how CSS is so much better than tables... I'd have had this done if I stuck with tables an hour ago...

I just want the name and dropdown box on the left, and the numbers on the right.

 

[notfred]

screw it, I changed it to a table.

 

[Drakkon]

ummm for the td you have the numbers in do a vAlign="right"?

 

[Mucman]

The beauty of CSS is that once you got it down pat, you can totally change the look and feel of the site with a different stylesheet
without changing the HTML. I think you could have done what you wanted with two spans in a div.

 

[Zucarita9000]

Originally posted by: Drakkon
ummm for the td you have the numbers in do a vAlign="right"?

Actually, it would be just align="right". vAlign values are "top", "center", "bottom", "baseline", etc.

 

[notfred]

Originally posted by: Mucman
The beauty of CSS is that once you got it down pat, you can totally change the look and feel of the site with a different stylesheet
without changing the HTML. I think you could have done what you wanted with two spans in a div.

I had two spans in a div. I could NOT get them to go to opposite sides of the div.

For argument's sake, here's the code I had, basically:

<style>
div{
width: 600px;
}
</style>

<div>
<span>on the left</span>
<span>on the right</span>
</div>

Add as much CSS as you like, try to get the spans on the left and right edges of the div. And you can't use absolute positioning, because that will cause the height of the <div> to shrink so that it no longer contains the contents of the <span>s.

 

[Mucman]

Originally posted by: notfred

Originally posted by: Mucman
The beauty of CSS is that once you got it down pat, you can totally change the look and feel of the site with a different stylesheet
without changing the HTML. I think you could have done what you wanted with two spans in a div.

I had two spans in a div. I could NOT get them to go to opposite sides of the div.

For argument's sake, here's the code I had, basically:

<style>
div{
width: 600px;
}
</style>

<div>
<span>on the left</span>
<span>on the right</span>
</div>

Add as much CSS as you like, try to get the spans on the left and right edges of the div. And you can't use absolute positioning, because that will cause the height of the <div> to shrink so that it no longer contains the contents of the <span>s.

What was in your stylesheet?

you should have

#left { text-align: left;}
#right { text-align: right; }

then your HTML

<div>
<span id=left>on the left</span>
<span id=right>on the right</span>
</div>

 

[notfred]

Originally posted by: Mucman

Originally posted by: notfred

Originally posted by: Mucman
The beauty of CSS is that once you got it down pat, you can totally change the look and feel of the site with a different stylesheet
without changing the HTML. I think you could have done what you wanted with two spans in a div.

I had two spans in a div. I could NOT get them to go to opposite sides of the div.

For argument's sake, here's the code I had, basically:

<style>
div{
width: 600px;
}
</style>

<div>
<span>on the left</span>
<span>on the right</span>
</div>

Add as much CSS as you like, try to get the spans on the left and right edges of the div. And you can't use absolute positioning, because that will cause the height of the <div> to shrink so that it no longer contains the contents of the <span>s.

What was in your stylesheet?

you should have

#left { text-align: left;}
#right { text-align: right; }

then your HTML

<div>
<span id=left>on the left</span>
<span id=right>on the right</span>
</div>

That doesn't work.

 

[igowerf]

#container { width: 600px; border: 1px solid black; }
#left { float: left; padding: 2px; }
#right { float: right; padding: 2px; }

<div id="container">
<span id="left">aligned left</span><span id="right">aligned right</span>
</div>


This works for me.

If you want to use text-align instead of float, then you'll have to give the span tags a width so they actually fill up their container. Otherwise, the span tags only "span" the width of their text.

#container { width: 600px; border: 1px solid black; }
#left { width: 50%; padding: 2px; text-align: left; }
#right { width: 50%; padding: 2px; text-align: right; }

 

[Mucman]

Originally posted by: igowerf
#container { width: 600px; border: 1px solid black; }
#left { float: left; padding: 2px; }
#right { float: right; padding: 2px; }

<div id="container">
<span id="left">aligned left</span><span id="right">aligned right</span>
</div>


This works for me.

If you want to use text-align instead of float, then you'll have to give the span tags a width so they actually fill up their container. Otherwise, the span tags only "span" the width of their text.

#container { width: 600px; border: 1px solid black; }
#left { width: 50%; padding: 2px; text-align: left; }
#right { width: 50%; padding: 2px; text-align: right; }

thanks for the correction 🙂 I meant to use float