3 replies [Last post]
chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 8 years 31 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

guys,

how do you setup a recurring story header such that the story title appears in one style left-justified, and the author of the story can appear in a different style right-justified on the same line? If I define two styles here, I always get the content on two different lines. I want this:

Aliens land in my back yard                                                Jason L Michael
------------------------------------------------------------------------------------------
To the astonishment of local astronomers, a group of sightseeing aliens landed in my back 
yard today.  Neighbors were heard saying, "There goes the neighborhood!"...

But, I get this:
Aliens land in my back yard Jason L Michael
------------------------------------------------------------------------------------------
To the astonishment of local astronomers, a group of sightseeing aliens landed in my back 
yard today.  Neighbors were heard saying, "There goes the neighborhood!"...

Or this:
Aliens land in my back yard                                                 
Jason L Michael
------------------------------------------------------------------------------------------
To the astonishment of local astronomers, a group of sightseeing aliens landed in my back 
yard today.  Neighbors were heard saying, "There goes the neighborhood!"...

I can't position the boxes by the pixel, since they are recurring down the center column of my site.

What am I missing here?

chewy

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

story title positioning

Hi Chewmanfoo,
Put both the author and title in separate divs float one left the other right and wrap them in a div that is set to clear both. Make sure you specify the widths.

.row{clear:both; width:100%;}
.title{width:50%; float:left;}
.author{width:48%; float:right; text-align:right;}
<div class="row">
   <div class="title">Aliens land in my back yard </div>
   <div class="author">Jason L Michael </div>
</div>

Leaving the total of the widths at less then 100% helps stop the floated divs moving out of position.

chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 8 years 31 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

Oh thank you thank you thank you!

Tony,

That tip made all the difference! Having to tweak with it, getting the colors to join in the middle etc., I've learned so much in the past 45 minutes about boxes and css! You rock, man!

If there's anything I can ever do for you, don't hesitate to ask.

blushing,
chewy

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Thanks

Thanks Chewy,
The best thing you could do for me is help promote this site, link to us from your site.