17 replies [Last post]
theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Hello.

I have a DIV with a width of 600px. On the left-side within that DIV I want to have a logo. On the right side, I want to have an address block and then to the right of that I want to have contact numbers. Right now I've done this using float:left; (for the logo) and float;right (x2 - one for the address block and one for the contact numbers). This works great across Safari, Firefox and Opera (Mac) and Safari, Firefox, Internet Explorer (PC). No problems there.

But, now I've been asked, below all this, to add a tagline which will start at the same point (horizontally) as the address block and span across (below both the address block and contact number block). Because this tagline is wider than the address block alone, it can't be within the address block element (as that ruins the spacing between the address block and the contact number block). But, I have no idea how to align this tagline to the address block?

I tried, via Javascript, determining the offset (left side) of the address block element and dynamically writing the position of the tagline element based on this, and that worked, but because locations move when the user changes window sizes, everything moves with the window except the tagline (so, not a solution).

Anyway, I don't know how confusing this is (makes sense to me, but I know what I'm asking)...

k.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

just place the tagline in a

just place the tagline in a p with a left margin equal to the logo width

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Yea, I think if it's best if

Yea, I think if it's best if you see the layout?
I've placed a version online here...
http://dev.upinc.ca/tempsite/v2/
Safari (Mac & Windows), Firefox (Mac & Windows) and Opera (Mac) work fine.
Internet Explorer dies (surprise, surprise).
Any ideas?
k.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 49 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Try putting all you styles

Try putting all you styles in the stylesheet. You are using the html as presentational defeating the idea of clean css.

<div id="footer_contact" style="float:right;">
<span class="text_contact">
<span class="contact_info">
 
<br>
416 703 9142<br>
1 877 252 6837<br>
416 703 9143</span>
<span class="contact_info" style="margin-right: 8px;">

This could be why IE is messing up. And you have 38 errors.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdev.upinc.ca%2Ftempsite%2Fv2%2F

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Yea, I was just adding the

Yea, I was just adding the css info into the html for quick testing, and then I clean it up into the linked stylesheet. As for the errors, looking at them, they're all results of old habits (I haven't actually coded in close to 8 years...didn't have to close and back then... ). I'll clean that up as well.

As for the error of placing a

inside a , how do I insert a paragraph break within a then?

Your help is much appreciated, as is that link!

I'll clean all this up and see if it helps with IE?

Thanks,
Kristin.

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Ok, it's now validated as

Ok, it's now validated as "XHTML 1.0 Strict", zero errors.
All styles have been cleaned up and are now in the stylesheet.
Nothing has changed in terms of the layout though — still working in all three browsers on the Mac (Safari, Firefox and Opera) and the two in Windows (Safari & Firefox), but Internet Explorer still breaks.

There's something weird going on with IE within the "footer" section (div id = "footer) — it seems like it has something to do with how the browser handles the float & clear:both;

As well, IE doesn't seem to render padding and margins very well either?

Do you have any ideas?

Thanks,
Kristin.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Kristin, I now have a

Kristin,

I now have a better idea of what you're trying to accomplish. I would tackle this by giving #footer_contact a width based on ems (try 27em) so that it will expand with text resizing. And in addition, float .contact_address left.

Now with that out of the way, I need to comment on the way you've marked it up - it's not good. Div and span elements have no semantic value. I may have done something along these lines:

<div id="footer_contact">
  <dl>
    <dt>Telephone</dt>
    <dd>416 703 9142</dd>
    <dt>Toll free</dt>
    <dd>1 877 252 6837</dd>
    <dt>Facsimile</dt>
    <dd>416 703 9143</dd>
  </dl>
  <address><span>Up Inc</span><br />
    675 King Street West, Suite 301<br />
    Toronto, Ontario, Canada  M5V 1M9<br />
    <a href="mailto:[email protected]">info@upinc.ca</a>
  </address>
</div>

Also the use of empty clearing divs is frowned upon.

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Thanks again for your

Thanks again for your help!
I just copied the below code into a new document and opened in a browser (Safari) and the results look like this...

Telephone
416 703 9142
Toll free
1 877 252 6837
Facsimile
416 703 9143

Up Inc
675 King Street West, Suite 301
Toronto, Ontario, Canada M5V 1M9

Am I doing something wrong? I'd like the numbers to be on the same lines as the contact type, and at the same time, the address block is below the contact type/numbers? Or, were you not being literal in your coding (ie. just a tagging example)?

As well, how does one get around using clearing divs?

Thanks again,
Kristin.

wolfcry911 wrote:

Now with that out of the way, I need to comment on the way you've marked it up - it's not good. Div and span elements have no semantic value. I may have done something along these lines:

<div id="footer_contact">
  <dl>
    <dt>Telephone</dt>
    <dd>416 703 9142</dd>
    <dt>Toll free</dt>
    <dd>1 877 252 6837</dd>
    <dt>Facsimile</dt>
    <dd>416 703 9143</dd>
  </dl>
  <address><span>Up Inc</span><br />
    675 King Street West, Suite 301<br />
    Toronto, Ontario, Canada  M5V 1M9<br />
    <a href="mailto:[email protected]">info@upinc.ca</a>
  </address>
</div>

Also the use of empty clearing divs is frowned upon.

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Ah, brilliant, the

Ah, brilliant, the float:left; & width:27em; suggestion totally solved THAT problem — THANK YOU!!!!

But I'm still left with an IE display issues — for some reason it looks like the container div (#footer) isn't growing (in height) with the contents? I think it has something to do with my specifying the height as 50px? But, if I remove the height:50px; altogether, the space below grows TOO much? Again, all the other browsers I've been testing display "OK" either way (with or without the 50px height)?

Once again, any advice would be appreciated!!!

Thanks again!
Kristin.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

theboyk wrote:Thanks again

theboyk wrote:

Thanks again for your help!
I just copied the below code into a new document and opened in a browser (Safari) and the results look like this...

Telephone
416 703 9142
Toll free
1 877 252 6837
Facsimile
416 703 9143

Up Inc
675 King Street West, Suite 301
Toronto, Ontario, Canada M5V 1M9

Am I doing something wrong? I'd like the numbers to be on the same lines as the contact type, and at the same time, the address block is below the contact type/numbers? Or, were you not being literal in your coding (ie. just a tagging example)?

As well, how does one get around using clearing divs?

That's just the html - it still needs to be styled to suite your needs.

There are several ways to contain floats (do a search) but one the most common is to add overflow: hidden; to the parent element.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

theboyk wrote:Ah, brilliant,

theboyk wrote:

Ah, brilliant, the float:left; & width:27em; suggestion totally solved THAT problem — THANK YOU!!!!

But I'm still left with an IE display issues — for some reason it looks like the container div (#footer) isn't growing (in height) with the contents? I think it has something to do with my specifying the height as 50px? But, if I remove the height:50px; altogether, the space below grows TOO much? Again, all the other browsers I've been testing display "OK" either way (with or without the 50px height)?

What worked for me was to remove the 50px height and set the overflow to hidden

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

wolfcry911 wrote:There are

wolfcry911 wrote:

There are several ways to contain floats (do a search) but one the most common is to add overflow: hidden; to the parent element.

Removing the 50px height and adding overflow:hidden; (and removing the clearing div) to the footer div solved that problem, but when I tried removing my other clearing div (replacing with overflow:hidden;), I'm again getting formatting errors (in all browsers)? Maybe overflow:hidden; isn't a solution to the second clearing div (and maybe you never meant it to be)?

Leaving the clearing div = http://dev.upinc.ca/tempsite/v2/index.html (working in all browsers)
Removing the clearing div = http://dev.upinc.ca/tempsite/v2/index2.html (not working in all browsers)

I'm plugging away locally, as well as cleaning up the address block formatting like you suggested, but the above are left untouched online...

Thanks ever again,
Kristin.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

What sux is that <address>

What sux is that was never meant to hold actual addresses, but to hold info, like, Joe Schmuckenburger who wrote the technical paper : ( Though I've abused the tag for just this type of info, because there should be a real tag.

A definition list though for the numbers is semantically perfect for the job: stuff on the left has a semantic relationship to the stuff on the right, pretty much a term and a definition. So long as everyone remains on one line, it will work ok in IE. IE can give you trouble if the left side ever grows (unlikely to happen unless the company moves to a street with a very long name or something, lawlz).

Anyway, clearing is kinda like enclosing. Wolf's referring to "enclosing" where a parent who's holding a float collapses its height because it can't see the bottom of the float-- the float's like a Post-It note with the bottom sticking out of the page. Setting overflow: hidden (or any overflow other than the default, visible) changes the rules and lets the container now see its floated child's bottom, so now it can grow to enclose that float.

Your second clearing div is doing something else, actually clearing. It's telling elements who come after the float where the float's bottom is, and creates a newline. So, to keep that piece of text under the floats, you could actually just make that piece of text do the clearing itself.

Like, instead of this:

<div class="clear"></div>
<span class="text_smallprint">Look for our new, comprehensive and spectacular site. Soon.</span>

you could have this:
<span class="text_smallprint" class="clear">Look for our new, comprehensive and spectacular site. Soon.</span>

Enclosing and clearing floats is almost an art, I swear. Not being an artist, I sometimes hack away at it. But it's pretty much required learning.

Also, know that the validator is stupid. One can make code perfectly valid, while remaining ugly. Kinda like, it's perfectly legal for obese seniors to walk the streets with skimpy bathing suits-- they're not violating Public Nudity laws. But it's not pretty. : ) The validator can check what are basically spelling mistakes-- a valuable tool, absolutely. Check every time you make a change of more than a line. But it can't tell you if code is good. Just a warning, it's a trap I fell into once.

I'm no expert, but I fake one on teh Internets

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Ah, that makes total sense

Ah, that makes total sense — so, basically, the clearing DIV I had was redundant in that I could have just included the clear:both; into the text_smallprint span. Makes sense.

And yea, I'm not really replying on the validator, but if anything, it's be a good way to find which of my old coding styles don't really jive anymore (since it's been a loooong time). So, it's a nice way to see what's been updated, etc.

Thanks again!
Kristin.

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Ok, tried that (adding the

Ok, tried that (adding the style="clear:both;") to the span and removed the clearing div, but that didn't seem to help?
http://dev.upinc.ca/tempsite/v2/index2.html
k.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Stomme poes wrote:What sux

Stomme poes wrote:

What sux is that was never meant to hold actual addresses, but to hold info, like, Joe Schmuckenburger who wrote the technical paper : ( Though I've abused the tag for just this type of info, because there should be a real tag.

I personally believe this is borderline acceptable in this case. It's the company's address responsible for the website and content therein. Technically the other data may be included in the address as well...

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Sorry k I forgot to tell you

Sorry k I forgot to tell you that blocks do the clearing. You could set that (by default) inline span to display: block and it will naturally take up 100% of the available width (the width of its parent block) which will also allow it to fully clear. I forgot about that.

Wolf yeah I've used the reasoning myself on some of my sites. I waffle between using and not using it. Recently I had a list of other company addresses and I chose to not use . But, I still want a real tag for Christmas, and a pony.

I'm no expert, but I fake one on teh Internets

theboyk
Offline
newbie
Toronto
Last seen: 14 years 8 weeks ago
Toronto
Joined: 2008-12-09
Posts: 10
Points: 0

Thanks again!

Thanks again!