Main Page » Blog-Like Typing Detected »

2009/04/06: A Lengthy Problem and a Slightly Different Layout

Created: / Modified:

Always use secure-HTTP / Secure HTTP / Permanent Link

It has come to my attention that on some settings, the 4komas in Touhou Nekokayou are shorter than the sidebar of the comic. This is causing the sidebar to overlap with the comment-box. To make a long story short, it Doesn't Look Nice. I'll admit that I wouldn't worry too much about this since it doesn't affect me personally, but I'm rather impressionable, and the concept of You've Got To Make A Good Impression has been on my mind lately.

So, sup?

I set up the page so that you could do just about any arrangement you wanted using only CSS and div-tags (I hope). Well, okay, I suppose it'd be a whole lot more effective if I had a "theme" system which actually changed the layout of the HTML-markup instead of just altering the CSS, but this is the way I Personally Happen To Be Doing Things At The Moment. There's a Hardware-div, which contains everything that isn't in the Header and Footer divs; there's the Content div, which contains everything from the page-content to the comments; and there's the Navbar-div, which contains the navigation bar.

What's supposed to happen?

The navbar is supposed to float on the upper-right there. Stuff that is shorter than the navbar will get wrapped, and stuff that is past the bottom of the navbar will take up the whole horizontal width of the window.

Why are things going wrong?

In short: because CSS is supposed to behave like that. A floating element floats on top of any other non-text elements in the same div it's in. Only text is wrapped.

Some solutions, and why they don't work
  • What happens when I put "clear:right" in the CSS for the comment-style? The comment-div gets pushed down until it is below the navbar, regardless of where it was before.
  • What happens with I (do X other thing with CSS)? Either nothing, or it breaks stuff like the above.
  • How about setting up the markup so that stuff before the end of the navbar is in one div, and stuff after it is in another div, so you can set them at different widths? Can't. It is physically impossible to determine where the navbar will end, given different window-sizes and screen-resolutions and content-shapes, and someone resizing an existing window will make it worse.
  • What happens when I put the Navbar-div inside the Content div? Nothing: it's still in the same div as the content; we've just put it deeper inside?
  • Okay, what happens when I put the Navbar div outside the Hardware div? What I get is a nice two-column layout, one with the content and the other with the navbar at the top.
  • Can't I just do that normally with CSS? Yeah, but I don't wanna.
  • Why not? I'm not used to doing it that way, I guess. I dunno, let's try it out anyway!

Hence, the new change to the site. For those of you who want the previous full width back, you can select the style at the top of the header there.

As an aside, I've also made some adjustments to the code. Put it like this: if you don't notice anything, I've done my job right.

2 Comments (auto-closed) (rss feed)

Twilight

;^_^ did I make you go through that much trouble? Sorry about that. For what it's worth it seems to be working now.

Dizzy H. Muffin

Trouble? What trouble? It was mostly fun! The only trouble I had was when I didn't notice I screwed up the CAPTCHAs |3

... I also appear to have momentarily screwed it up for myself. Whee!