Topic: A couple of minor layout issues

I'm having two minor but annoying issues on the main page here:

http://www.in-dented.com/gallery/

1) in IE, the "node" div does not extend to contain the "node-sub" div which is floated within it. I can't figure out why. The "node-sub" is floated right, and I suppose I could make two div's and float them both left, but I would prefer not to.

2) in Firefox, the "side" div is a couple of pixels higher than the "main" div, though the tops should be even.
I know I have had this issue in the past, and have fixed it, but I cannot remember what the problem was (and thus can't remember how to fix it).

Any tips appreciated.

=)

#2 is the margin values for .node-side & .node

I don't believe I'm seeing #1

Ok, got #2 straightened out by removing the top margin form both divs.

Here is a screen shot of #1, which I am still clueless about.
http://www.in-dented.com/temp/gallery.gif

Thanks



(Edited by DL-44 on 10-29-2005 03:31)

DL-44: have you tried to set the overflow:hidden; in the .node rule to fix the point #1 ?

see if .node { width: 99%; } fixes it

Yep, that did it reisio.

can you tell me why? =)

I can't justify the effort. "IE is stupid" has always been enough to satisfy me. (or: don't know, don't care)

(2 minutes later)
I've given it a good 30 seconds thought and I still have no idea. Ask someone knowledgeable.

quote:

---

reisio said:

"IE is stupid" has always been enough to satisfy me

---

I guess that'll have to do then

Try here, it might help:
http://positioniseverything.net/explorer/escape-floats.html

.node { width: 99%; } might be an alternate Holly Hack and trigger hasLayout, I don't know.

Alternatively, try * html .node { height:1px }. Only IEs < 7 will apply the rule (they think there is a magical element above html, according to spec there isn't) and the contents of the box will stretch it because IE honours the contents before the container. So it will stretch to the spec auto size, but the float should then be contained because according to the rendering engine, it now "hasLayout".

Cheers,
DC

As far as I can tell if you have a container that is non-float positioned and you flaot something inside it then the rendering engine no longer stretches the container around it. Why, I have no idea, but I've encountered this problem in my own design work before.


Justice 4 Pat Richard

But that is actually according to spec. Eric Meyer wrote a good article on why.

http://www.complexspiral.com/publications/containing-floats/

However, I thought the OP had a clearing element at the bottom of the containing div, which should change the behaviour as in the article.

Regards,
DC

Yes, or, as I use in my designed when i need to do this, everything gets floated. It may not, perhaps, made for the most semantic code in the word, but it works, and it works the same across all the browsers.

For example: http://sunday.yarinareth.net/design/sunday_3-0-1/index.html

This is, admittedly, on a partially completed mockup of a not-even-begun WordPress theme. But it uses functional markup (a <div> outer wrapper that provides the centering and nothing else, so it's invisible as far as the user is concerned, a <div> header of a fixed size that fills the containing wrapper div's width and is floated left, a sidebar and content <div> both sized so they float one next to the other, and a footer <div> that clears both, just as the header does), and has no broser-specific hacks in the CSS. And that's how I intend to keep it, if I can. I'll be quite happy with the layout if I can avoid hacking anything.


Justice 4 Pat Richard