Contain/scale text in non static header?

[jlockley]

Thanks to Vragabond, I have resolved probably as much of the gap issue in a back page template as possible and now have a useful site for my 20"Monitor.
HTT://

http://www.chefsprofessional.com/page.html

Scaling the page produces the not surprising results of moving the text down into the next section. The simplest way of doing this is probably a graphic, but I wonder if there is a way to scale.

 

[Vragabond]

I see no reason for you to use floats. Why are you using floats, anyway?

When floats will not have enough space to float next to each other, they will fall down into the next line. Same with multiple lines of text in a container that is too small for them. What you can do is limit the container size -- if you do not allow the container to be smaller than certain width, then your floated elements will not need to fall to the next line.

However, you have to choose one or the other: either you will deal with scrollbars and everything will be fixed or things will be fluid and they will reposition themselves when window will get smaller/larger.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

The floats control control an IE gap issue and accompanying text placement problem. A link you provided on margin collapse

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

points out that one way to control the issue is to use floats to define boundaries prevent margin collapse. Although these elements are not margin defined, it works with padding as well.

I have been looking at the idea of using ems as component sizing. It appears daunting (but what isn't?).

I have to say, though, that a graphic solution with good alt wording is looking better every day.

 

[Vragabond]

Floating might be one of the solutions, but if you have a page like yours, it's far from best given that there's no need to float any of the elements. How about changing all the margins to 0 and working strictly with padding on those elements?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

I tried that and it didn't work. Also tried "clear" at the top, just for kicks. Obviously not functional.

I have made a lot of alternates - no margins, * {margin: 0} (one of your tips) same for padding, all to no effect.

I am fooling around with graphics on the back pages, since those can be replaced by alt and I can title the content in the html, anyway, but being newer to css than html, these gap issues are giving me a run.

Weird problems seem to require weird work arounds.

Here's another poser: I had the margin set to 40px (I don't remember why). At one point I messed up with the top background image - extra bracket or o ne too few - one of those things - and I see that the footer graphic is spilling over into the logo/header by 40px.
This probably explains some issues I was experiencing with that part - but I don't think the gap.

Removing the margin took it out, but isn't that odd? Or is it?

Come to think of it, maybe that was a cause. WHen I get back to it tonight, I will play around again. That happen often?

 

[Vragabond]

I don't know what exactly you're doing, but everything I told you I tried in my browser and it worked. I think you're overcomplicating this issue. Your website is pretty straightforward, so you should design it straightforward. Maybe remove everything else and start from scratch. Then you won't have legacy CSS issues anymore.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

I don't know what exactly you're doing

Not sure I do either. But I am working on that.

I told you I tried in my browser and it worked

so did I, and yes it did - bringing of course, other problems in it's wake (setting a 105px index-left in content also moves the footer 105px as well, but I am on it right now. I have for the moment gone over to a graphic for secondary pages. I will have one of them up later today and send the link.

Maybe remove everything else and start from scratch. Then you won't have legacy CSS issues anymore

That is precisely what I did - and it's interesting to see how things are and are not working out. I think I am good to figure them out (knock on wood) but I sure thank you for the guidance. I will put up a page with content later today (I hope) and drop the link here.