Left float and right float incl time javascript

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Left float and right float incl time javascript

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Left float and right float incl time javascript

Page: [1]


spinningjennie Posts: 309 Joined: 2/20/2002 From: Status: offline	Left float and right float incl time javascript - 10/31/2006 23:13:35 I want to float some text left (with left alignment) on the one 'row' and float some other text right (with right alignment) on the same 'row'. (I'm not using tables here). There might be an even better way of keeping my text on the same 'row', other than floats. And I suppose even floats are not foolproof; they might just give me a better look more often. The text I want to float right is my city, Sydney, plus javascript for the Time/Date in Sydney. When I try to use the right float I can't get the 'Time/Date' javascript to work. For this reason I haven't used floats on these 2 lots of text. Instead I've used a no doubt 'no-no' technique of putting spaces between the text on the left and the text including Time/Date on the right. A problem arises with text wrapping onto the next 'row' when the month is an extra long one, like 'November', or a viewer's screen resolution makes the text larger. Please see this page and the stylesheet Many thanks for any suggestions on this! spinningjennie

Tailslide

Posts: 6367
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

RE: Left float and right float incl time javascript - 11/1/2006 2:47:01

Not sure why it wouldn't work with just floating it - that's the easiest/safest way in my opinion (well ok it's the way I do it!). Don't suppose you remember the code you were using do you?

Personally what I tend to do is stick it in spans like this:

<span class="left">Stuff to go on the left</span>
<span class="right">Stuff to go on the right</span>

#yourdivname .left {float:left; width:40%;text-align:left;}
#yourdivname .right {float:right; width:59%; text-align:right;}

You do need to give all floats a width unless it's for an image which has an implicit width anyway.

Does that lot help at all?

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to spinningjennie)


spinningjennie Posts: 309 Joined: 2/20/2002 From: Status: offline	RE: Left float and right float incl time javascript - 11/1/2006 19:26:29 Thanks a lot Tailslide for alerting me to the use of spans vs divs and the need to assign a width to the floats. I now see that spans allow text to remain on the same line whereas the div forces a new text line. The javascript now appears. I'm not quite there yet however. My right floated text is not aligning to the right as it should. This helps add space between the left and right floated text. Here's the revised page. Here's the revised stylesheet. Background detail: I wanted to add some padding to each end of my row/line of text - left padding on the left floated text and right padding on the right floated text. I see that the padding on the right is not matching the size of the padding on the left even though both lots of padding are 2% and the total of text widths and paddings is 100%. So I know the right floated text is not aligning right. I've tried the same date without the javascript but the right alignment still doesn't work. Thanks for any suggestions. spinningjennie (in reply to Tailslide)


Tailslide Posts: 6367 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Left float and right float incl time javascript - 11/2/2006 2:24:38 Hi again Add overflow:hidden to your "red" div to ensure that it will properly encompass the two floated spans and give you the background colour you want. Then add the padding to the spans themselves - remove the padding from the container#red bit. #red { overflow:hidden; width:100%; color: #ffffff; background: #ff0000; list-style: none; vertical-align: middle; font: bold 105% Arial, Helvetica, sans-serif; } #red .left {float:left; width:36%;text-align:left;padding-left:2%;} #red .right {float:right; width:60%; text-align:right;padding-right:2%;} _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to spinningjennie)


spinningjennie Posts: 309 Joined: 2/20/2002 From: Status: offline	RE: Left float and right float incl time javascript - 11/2/2006 19:21:24 Thanks again Tailslide. Your suggestions have allowed the right alignment to work so that the padding is even on both sides. All is fine in FF. However in IE I now have the problem of the right aligned text shifting down to a lower level than the left aligned text. Regards, spinningjennie (in reply to Tailslide)


Tailslide Posts: 6367 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Left float and right float incl time javascript - 11/3/2006 2:48:31 Hi I can't reproduce the issue this end (IE7, IE5.5 - haven't started up the laptop to check IE6) - it all looks fine. However it sounds like an IE rounding error. IE thinks that 56.5, 33.5, 5 and 5 when added together equals 101. So I always reduce the % slightly so that the totals add up to less than 100%. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to spinningjennie)


spinningjennie Posts: 309 Joined: 2/20/2002 From: Status: offline	RE: Left float and right float incl time javascript - 11/3/2006 6:12:53 Ah, yes. You're right Tailslide about the rounding up. When I removed the two lots of additional 0.5% width on the floats I didn't have the problem in IE 6.0. Another good lesson learned from you. Thankyou! spinningjennie (in reply to Tailslide)