dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
1366

altermatt
Premium Member
join:2004-01-22
White Plains, NY

1 edit

altermatt

Premium Member

div vs. span issue

Hi all; another newbie question that has me stumped! I want to make a footer that stretches across the page, is one line, has a lime background, and has one piece of text aligned left and one piece aligned right. So I created a div class="footer" that had the lime background and did two spans, class="footer1" and class="footer2" with the text specifications and float:"left" for 1 and float:"right" for 2. Used the code
<div class="footer"><span class="footer1>some text here</span> <span class="footer2>some more text</span></div>
 
But that, while aligned fine, had no background color.

So I added the background color to the spans, and now the two bits of text (left-aligned and right-aligned) had the background color, but in between, the white space (covered, I thought, by the div) had no background color, so still not the page-wide lime line I wanted. Taking out the div altogether gives the same results, as expected. Even tried adding 100% width to the div specs (which may not even be legal) with still no success.

Without using tables, how can I get a page-wide line with a lime background all the way across, and two bits of text, one right-aligned and one left-aligned?

LATER EDIT: I got it! After some kludging, but I'm not sure this kludge, while working, is "kosher"---is there a better way? In the css, I created div.footer with all the specs, text specs and background color, plus a value of text-align: left, and then span.footer2 as it was, with float:right, eliminating span.footer1 altogether. Here's the new code:

<div class="footer">some text here <span class="footer2"> more text here</span></div>
 

It works, a full page width lime line with some left aligned text and some right aligned text and the background color all the way across, but is it right?

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

When you float all the content within a div, the div ends up having zero height. You need to "clear:both" to force the div to expand to contain the floated elements.

You can either add a new element (e.g. an empty div) with a style of "clear:both" inside the div but after the floated elements.

Or you could float one of the spans and not the other and just text-align that text. This has a problem that if the floated span is taller than the non-floated text then the div won't be large enough.

Or you can apply a clear fix.

altermatt
Premium Member
join:2004-01-22
White Plains, NY

1 edit

altermatt

Premium Member

cdru, I edited to add my "kludge" before I saw your reply, and it looks like we're on the same page, except your explanation is much more elegant! Floating one of the spans and not the other and just text-align the text. But I get your warning about height; it didn't matter in this case, but could in the future. So it looks like the clear:both is better.

I checked out the clear fix link which looks like it exactly addresses the problem, but didn't understand where I add the group. elements---those are new to me! Where do I add (in the markup) group class=after, etc.?

If I did, instead, your clear:both fix, am I correctly understanding that I would add a new div to the css, say div.clearfoot and put it in the page's code after all the spans as an empty div? Or just add the clear:both spec to the div.footer specs? I think I'm missing something here. And is this better than the second suggestion (the one I came up with too, less elegantly, and am using now, of floating the second span only and text-aligning the div?

Thanks so much!

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

To use the clear fix, you would apply it to the parent element that holds the floated elements. So your first div would be

<div class="footer clearfix">

altermatt
Premium Member
join:2004-01-22
White Plains, NY

1 edit

altermatt

Premium Member

Ah, thank you! For now, the solution I came up with, very similar to your second one (floating the second bit of text and setting the text-align oppositely in the div) is working fine, as far as I can tell. Is it okay to leave it (since height is not an issue for now), or is it more "kosher" to use the more elegant ones?

And again, thanks for your patient and complete and quick responses!

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

said by altermatt:

Is it okay to leave it *since height is not an issue for now), or is it more "kosher" to use the more elegant ones?

It all a matter of taste really.

Purists won't like the first one as it's an empty element and serves no function other than displaying the content. But it's easy to implement and it just works across all browsers. I have a .left, .right, and .clear class that floats left, right, and clears both in my default css file I start off with so I use this a decent amount. I use this probably the most often with templated designs where content may be random lengths and I don't want to worry about one side being longer/shorter than the other. Functionality wins out over form.

The 2nd option removes the issue with the first, but adds its own that we've already discussed. If it's for something that I KNOW won't change or will change very rarely so I don't have to really worry about content size growing/shrinking causing issues, it's probably the most kosher of the 3 if you're a purist. Here, form wins out over functionality.

The 3rd option may have issues in old browsers (e.g. IE6, maybe IE 7 too). You'd have to do some research. It's also not as easy to remember off the top of your head as the other too. It will work with modern browsers, it just seems more hacky then the others although it's cleaner in the markup.

altermatt
Premium Member
join:2004-01-22
White Plains, NY

altermatt

Premium Member

Thanks again! Second one (the one I figured out and you explained much better) it is for this footer, since it won't change too much. I will have to remember the height issue, though and experiment with the others.

With the demise of XP, I think supporting IE6 or 7 is even less necessary than it's been, since it's such a tiny piece of market share. It's only the XP people I know who had difficulty upgrading IE. Even on my XP, won't-do-Win7 laptop (our last non-Win8 machine) IE 8 installed.

cdru
Go Colts
MVM
join:2003-05-14
Fort Wayne, IN

cdru

MVM

said by altermatt:

With the demise of XP, I think supporting IE6 or 7 is even less necessary than it's been, since it's such a tiny piece of market share.

It depends on your audience. For instance, most people in this particular forum probably use something other than IE. I don't know too many web developers/designers that use IE by default.

However, if your audience is later baby boomer luddites, they may hang on to XP and old versions of IE much longer then they should. "Why should I upgrade when it works now?"