Alignment Of Two Things

[!!blue]

Ok, so let's say you have a nice big DIV and you want one thing to be aligned on the left side and the other to be aligned on the right side both items being on the same line.

 

How would you do that with CSS and not tables?

 

In a table, you'd obviously do this:

><table>
<tr>
     <td align="left" valign="top">this is aligned left</td>
     <td align="right" valign="top">this is aligned right</td>
</tr>
</table>

So ... how would I do this in one DIV without doing like 5 divs or something Yuck! I remember seeing this somewhere's but can't remember where.

 

This is useful, for example, when you have a header div with a logo on the left side and some text links on the right side aligned to the right.

 

later,

!!blue

[TCH-Bruce]

Blue, this site may help.

 

glish.com/css/

[MikeJ]

I'm not exactly a CSS expert, but I do not believe you can align two things in a single div. I believe it will require two divs (but you can nest divs).

[!!blue]

thanks guys! I guess I'll have some "divitis" on my page (from Zeldman's book desiging with web standards where everything on a page is in its own DIV ). But, I think I can do it with one div and two span classes.

 

*goes off to work it out*

 

thanks again,

!!blue

[kaseytraeger]

blue,

 

This method uses two divs, but it works very well. You might give it a try if you haven't yet done it.

 

The CSS code is:

>#left {
 float: left;
 text-align: left;
 color: #fff;
 width: 49%;}

#right {
 float: right;
 text-align: right;
 color: #fff;
 width: 49%;}

#rowcontent{
 width: 300px;
 background-color: #CCC;
 border: 1px solid #000;
 padding: 0px;
 margin: 0px auto;}

.defloat {
 clear: both;}

 

The HTML code is:

><div id="rowcontent">
 <div id="left">Left-Aligned Text</div>
 <div id="right">Right-Aligned Text</div>
 <div class="defloat"> </div> <!-- use this to bring all of your floated elements back down to the page -->
</div>

 

Yes, it adds a few divs to your markup, but it's really quite similar to the original table example you gave. I've successfully used this method and was pleased with the results.

[Wilexa]

Just to add to Kasey's post:

 

Real World Style calls this "the 7-10 split".

 

See Real World Style.

 

...dave

[kaseytraeger]

Dave,

 

Thanks for pointing out where this method came from (and for providing the URL). That URL is definitely where I learned the technique, but I couldn't remember where it had come from. But I most certainly remember the giraffe, so that's got to be it!

 

Thanks again, and now I've actually bookmarked the RealWorldStyle.com web site!

 

Thumbs Up

[!!blue]

I *knew* I had seen it somewhere before but didn't bookmark it!

 

Anyhow, I used one div and two spans but it was basically the same idea as the code example! I'll go back and add in the {clear: both;} bit.

 

thanks!

!!blue