getting text to float

[Anax]

Hia groovers,

I've just got a site up with a couple of glitches I've been puzzling over. Foremost a difficulty with trying to keep the pages as clean and fluid as possible (it's kiddy friendly). To this end I wanted to have the central text as an 'auto' scroll which will only get scroll bars when the bottom navigation console gets in the way. But all my attempts to play with floats haven't worked. It seems the web is designed for text to be able to flow on down.

Another glitch is a floating element in Firefox coming down the screen.

I'd so love your input. And any other comments most welcome... :cheesy:

http://www.aberdeen-education.org.uk/readingbus/Drive/DriveHomeC.htm

shows off both problems

cheers

anax

[Dani]

I'd so love your input. And any other comments most welcome... :cheesy:

This isn't the appropriate place to ask for site feedback. Please post in the Website Reviews forum. Thanks! http://www.daniweb.com/techtalkforums/forum55.html

Also, I'm confused what you're asking because I'm using IE, and the body text only gets a vertical scrollbar when I squish the window small enough that the bottom navigation starts to overlap it. Isn't that what you want it to do?

What I do here at DaniWeb is I encace all posts in

<div style="overflow-x:auto; width:650px">

This way if someone posts a huge picture or a long line of code, it doesn't stretch out the whole page too wide and screw up the layout. Instead, it just puts a horizontal scrollbar beneath the problem post. I'm not sure if that's what you're asking. Basically, the overflow: attribute should currently work with all the latest browsers. However, I believe that overflow-x and overflow-y are currently IE-only but Firefox will support them in an upcoming version... I THINK. Please don't quote me on it.

[Dani]

Oh! On second thought, I just realized what you wanted. Suppose you use the float attribute, but it overlaps an element beneath it. What you want to do is encase the element beneath it with

<div style="clear:left|right|both">

Here's an example. Suppose you have

<div style="float:left">Blah Blah</div>
<div>More Text</div>

But you don't want More Text to show up until after the Blah paragraph has finished. What you want to do is encase More Text in

<div style="clear:left">

This pushes the <div> down so that it doesn't start until all floats coming from its left have finished. You would use clear:both to protect yourself from floats coming from both sides. Experiment. Try it. See if it does what you want it to. If I am reading you correctly, you want to wrap your bottom navigation into a clear:both, but I'm still a little confused what you're asking.

[tgreer]

Yep: Float is one of those attributes that basically works in conjunction wiht other elements set to float and/or clear.

[Anax]

Also, I'm confused what you're asking because I'm using IE, and the body text only gets a vertical scrollbar when I squish the window small enough that the bottom navigation starts to overlap it. Isn't that what you want it to do?

First off thanks so much for quick thoughtful reply and sorry I was so confusing. And I had tried finding review forum but missed it, sorry/thanks for link to it.

You got me right first go. The problem is many people with their small browser windows are finding the text is lost under console before scroll bars appear. I played around with % height and settled on 45%.

I learnt from your second reply and have experimented with your suggestions re clears, and can see why I was confusing with my talk of floats. I was thinking I could float my graphics that need to remain stuck to bottom of window and get my central text to stop and get a scroll bar when it was hit.

To put it another way I want my central text block to stop at the bottom minus 180px.

cheers again

anax

I'm really stuck