For reference, here is Kageyama's profile.

I'm assuming that the length is my Treasure's fault. When I use position:absolute the the profile is long enough to cover the lorem ipsum/pet description, but not my TC. However, when I use position:relative, the profile is long enough to cover the treasure...and maybe a second besides (presumably accounting for where the treasure is supposed to be at the bottom). The only way I can think to fix this is to go the absolute route and then stick a spacer image to the bottom of whatever story I eventually stick in there, but I was wondering if there was a more elegant solution?

I wrote a SUPER LONG response to you, so long that Subeta won't let me post it all at once, so is helping me make the full reply. Anyway here it is (hope subeta doesn't destroy the formatting).

A more elegant way to go about coding this would be to avoid position: absolute as much as you can, which is possible with the sort of layout you have here (a grid layout). I'll try to explain as clearly as I can. When you use absolute positioning for all the elements in a profile, you're giving coordinates for each element: You're telling each element exactly where it has to be in terms of the pixels on the screen. A more elegant solution would be to define instead where each element has to be in relation to the other elements on the page. This approach has the advantage of flexibility; it can respond to things like changing screen sizes and content length much more easily than if everything is rigidly defined.

You need to have a decent understanding of both the position and display attributes to do it this way, however. It comes out a lot neater and nicer, but can be a bit more complex to plan in some sense. One of the most important things to remember is that absolutely and relatively positioned elements are always relative to their closest absolutely or relatively positioned parent. Fixed positioning is a little different but we won't use it here.

I notice your current layout has boxes made of a background image and a few content boxes. I would take a slightly different approach. Here's the diagram I would make of this layout (just drawing these quickly for you on my whiteboard, I hope it's readable):

The layout consists of three main divs, which I've drawn in brown and labeled A, B, and C. The first one, div A, contains the image on the left. The other two contain the main content. If I could control the HTML, I would make these three in the same container. The divs that I've drawn in green are inside of the brown divs and contain the actual content you wish to display. Note that here, I've made the both the title and subtitle at the top into their own divs (each one would be an image with just that text, no background or border). I'll explain this further on.

The first step is to figure out which divs on the profile will correspond to A, B, and C. My first thought is that they should be three divs that exist in the same container, but looking at Subeta's HTML, this is not so simple. Here's how the profile HTML is structured (the relevant parts anyway - we can hide the rest):

Since your code goes inside pet_desc, any divs you create will also go inside of pet_desc. But luckily, since the first div only needs to contain an image, we can take advantage of existing divs. I would like pet_info to be the div that contains A, B, and C, because it seems like pet_desc could be B and pet_treasure could be C. It would be nice if div A could exist on the same level. Since we're not using column_1, I'll just go with that.

It's really difficult to explain all of the reasoning here - It might be easier to just explain how I'd make this work, before trying to explain how I got there actually.

(cont.)

Just helping them post their reply

(cont. from above)

Step One: Delete Subeta's default css that you don't need. The only divs we will care about here are pet_info, column_1, pet_desc, and pet_treasure. The others can be hidden with display: none. Meanwhile, I make a habit of removing all margins, width/height, padding, and floats from these divs while I'm at it (margin: 0; padding: 0; width:0; height: 0; float: none !important;) As a side note, it's not really good practice to use floats the way they're used here (Subeta is old and complex though so I'm not judging!)

Then, set everything to box-sizing: border-box. It will make the elements take padding and border into account when calculating dimensions, which it doesn't do by default.

* {box-sizing: border-box;}

Step Two: Absolutely position the pet_info div. This is your main container. You will want to position it absolutely (position: absolute), to act as a frame for the A, B, and C divs. Set the value of top to the distance you want the content to be from the top of the screen, and set left and right to be the margins you want (the distance from the sides of the screen). You don't want to set a width here, because setting the left and right value will force the width. Here is a diagram to show you how to get these values:

So for instance, you might set top: 150px; right: 200px; left: 200px; if those are the margins you desire.

Step Three: Styles for div A. We decided to use column_1 for this. The first thing we do is hide everything inside of column_1.

* {display:none !important;}

Next, we give it your image as a background image, and set the width and height to match the dimensions of your image.

{background-image:url('IMAGE URL HERE'); width: IMAGE WIDTH HERE; height: IMAGE HEIGHT HERE;

Finally, we position this absolutely but with a top: 0; left: 0; so that it ends up in the top-left corner of pet_info. Finally, we give pet_info a padding-left of whatever the IMAGE WIDTH is, plus any additional margin we want the image to have on the right side. That way, any non-positioned content inside of pet_info will be shown to the right side of div A.

Step Four: Now we make the positions for divs B and C (pet_desc and pet_treasure). We want these to be next to each other, but we also want them to each take up the remaining space about equally. Finally, we do want them to have space between them instead of sticking to each other. How do we accomplish this? We use inline-block, and give them the same widths (that will at the same time leave a bit of margin between them)

, { display:inline-block; vertical-align: top; width: 49%; }

This will, however, cause them to stick together. But I have a neat trick for preventing this. If we set text-align: justify on the parent (pet_info), it will cause all inlign children to be justified, including inline-block elements. If you recall though, when justifying text, the last line doesn't get the words spread out evenly like every other lines. So, we force these elements to wrap by making pet_friends also inline-block, but giving it a width large enough to cause it to wrap (and also making it invisible, maybe by zeroing the opacity). Recall that pet_friends is the next div in line after these, so it should wrap onto the next line and cause the first two to space themselves evenly.

If this has all been done correctly, you should have page layout like the one on my whiteboard (well, the brown parts anyway) :)

Step Five: Adding content to divs B and C! Div B (pet_desc) is the div your code goes in, so it's also the easiest part because you have full control here. You can simply add your page title (which I'll refer to with the id kageyama_title) as its own div (containing the title image), and add the rest of the content like normal content - images, text, etc. It's fairly straightforward.

The subtitle, however, is a little trickier. We want it to be inside of pet_treasure, but we cannot just insert HTML into that. So we use our old trick, which is to use an existing div, hide everything inside of it, and set our image as the background-image. We can use pet_treasure's h2 div for this, since you don't need it for anything else. Make sure you remove the margin/padding and set the width/height appropriately on this element.

Finally, we don't want the title/subtitle divs to be perfectly inside their parents. We want them a little bit outside the tops of their parent containers. We can achieve this by using position: relative, and giving them top: -100px (an example value - you should adjust this to whatever looks right to you) and then using margin-bottom: -100px (a little hack to prevent the element from still taking up its original space).

And that's it - the rest is just minor tweaks and styling. (end of post - thank you !)

Oh, wow, that's way more help than I was expecting. Thank you so much! Question: Column A isn't just an image; it disappears when you hover over it to reveal the pet image, color/owner info, minion, and (eventually) the Spotlight nom. Column 1 is the minion, so logically I can't swap it out for the hover and still have the minion (and everything else) show up beneath it, correct?

Ah, I see! Sorry I completely missed that part! This is how I would do it:

In essence, you want the column_1 (minion) and column_2 (basic info, which includes the spotlight div) to show up under the image hover. Because the code (annoyingly) has the minion by itself in the first column, and then has the spotlight div INSIDE the second column, the easiest design to implement would look like this:

I try to avoid absolute positioning as much as I can, but here is one case where I'd be okay with it, because of the use of the image. The image has fixed dimensions here, which means it's okay - and actually necessary - for the content behind it to also have rigid, fixed dimensions. In other words, absolute positioning = hard coding values, and in general it's bad to hard code values, but here's it's okay since the image width and height are gonna be hard values anyway.

The green div that contains the image (and which I labeled as such on my drawing) will be one you make yourself (which means it'll be in pet_desc). But you can absolutely position it top: 0; left: 0; and it will be positioned relative to pet_info as long as that is its closest absolutely or relatively positioned parent. To ensure that, just make sure you don't have any positioning set on pet_desc (you can clear it with position: static, the default).

The only other divs that should be positioned will be column_1 and the spotlight div. We should not position column_2, because we wish to position the spotlight div relative to pet_info, which means column_2 (which is a closer parent) can't be positioned - otherwise it would show up relative to column_2. But this is okay. You know how we made pet_desc and pet_treasure next to each other, by making them inline-block? We simply make column_2 inline-block as well and remove the padding-left from pet_info. So you will have column_2, pet_desc, and pet_treasure sitting next to each other, like this:

If I draw in the absolutely-positioned divs, it looks like this (the image div is on top of column_2 and column_1, there shouldn't be a margin, it's just hard to draw on whiteboard ahaha):

I hope this helps - I know it's a lot. I've thought about writing some proper set of tutorials, but I don't know if I can really formulate how to know how it should be done in every case.

Awesome~ Thank you so much for your help. My coding efforts thus far has been the equivalent of duct taping things together and hoping they stick, so you've really been a godsend with all this.