Board Thread:Support Requests - Designing Your Wikia/@comment-653063-20150301215456

You know, I'm really upset. I had a problem last week, and in the end I was able to solve it myself; I was so happy, "I'm not going to have to bother the Help people again with my walls of text, I almost feel like going and saying 'I had a problem but I solved it myself! yay!'." And now here I am again, with another wall of text, about an infuriatingly miniscule issue. I guess technically my issue is "people view Wikia sites on their cell phones," because if they just didn't, I could lay out the pages just fine for desktop view and go freakin on with life.

But no.

I'm having a lot of trouble making the layout of these pages look right -- I need to control the placing of some things on the page -- in both desktop view and mobile view. I found a way to make it work nicely for desktop, but it is horrible in mobile. I suspect the answer is going to be CSS-related, which is why I'm putting this here and not in the 'getting technical' board. Also even if the answer isn't CSS... yeah I guess this is still the right forum.

Over the last couple of weeks, we've been changing some pages over to look like this: (Alpha) -- -- The tabber has a float:right and the code for it all is at the top of the page. The tabber contains 6 somewhat lengthy tables; I put it at the top in order to ensure that it would be at the top-right corner of the page, without any of the text being above it.
 * text text text text ---|
 * text text text text |tabber w/||
 * text text text text |lots of ||
 * text text text text |tables of||
 * text text text text |informatn||
 * text text text text ---|
 * text text text text text text |
 * An Image text text text text  |

This makes mobile view look awwwwwful. Specifically, it means that a user on a mobile browser starts out viewing the tabber information, rather than "this is a page about __ class, in ___ game," which is a better consumer-design choice.

What I wanted to do, and couldn't, because I couldn't figure out the floats, was this: (Beta) -- -- Putting a float:left on the image is fine, the text wraps around the image like it should. But because... let's call "A" the image, "B" the text, and "C" the block of tabber code... because, when you view source on the page, and the code is: A B C which is what I'll have to do to make it show up properly (which means "in the correct order") in mobile, and then on desktop, the page looks like this: (Gamma) -- -- AUGH. How do I get something top-left and something else top-right, while still keeping things in the proper order for mobile view? (or maybe the question is backward: How can I keep mobile view from looking like the dog poop my neighbors won't pick up, but not completely ruin desktop-view in order to do so?) But you know, even for desktop, I'd rather have the Image on the top-left too. I dealt with it not being there because I said 'blah I can't make it work,' but... yeah anyway, now here I am.
 * An Image text text ---|
 * text text text text |tabber w/||
 * text text text text |lots of ||
 * text text text text |tables of||
 * text text text text |informatn||
 * text text text text ---|
 * text text text text text text |
 * text text text text text text |
 * An Image text text text text  |
 * text text text text text text |
 * text text text text text text |
 * text text text text ---|
 * text text text text |tabber w/||
 * text text text text |lots of ||
 * text text text text |tables of||
 * text text text text |informatn||
 * text text text text ---|

This page is laid out like the Alpha chart: http://disgaea.wikia.com/wiki/Male_Warrior_(Disgaea)?oldid=33677 - tabber block 'C' is top-right, yay. This page is laid out like the Gamma chart: http://disgaea.wikia.com/wiki/User:SannaSK/Sandbox?oldid=33683 - (ignore everything under 'END END END' and the section that says 'colors' etc). Image is top-left, yay, text wraps around, yay. Tabber is too far down, boo.

I asked my friend, who does more with CSS than I do, for help, and she told me:
 * open a div.
 * put a div float:left around the image, close it
 * put a div float:left around the text that needs to come before the tabber, close it
 * put a div float:left around the image, close it
 * close the initial div

This should 'fake' a table layout, she says, in the sense that it will line things up horizontally, "A", "B", "C", .... except that I tried it and it doesn't work on desktop. It just puts it all on the page like A B C

I thought about making a table with 2 cells, one for image+text, one for tabber, and hope that it does the 'right-hand cell slides down in mobile view' like Fubuki and TableWiz helped figure out for me for http://disgaea.wikia.com/wiki/Template:Disgaea_Classes - but for some reason it doesn't work here (to be fair: D_C only worked once I specified 'width:50%' in both cells, and I feel like I can't/shouldn't do that here because - narrow screens, wide screens, I want the text to fill the space, don't I want to not specify a width on 'the left cell'? Is "width:100%-minus-405px" an option?). Preview>Mobile just shows the image+text cell reeeeeeally narrow on the left half, and the tabber part reeeeeeally narrow on the right half. AUGH. Plus, unless it's the only way to make it work, I want to avoid using tables, because on some pages the text is short and the tabber is long and there's another chart that goes under the image+text but still to the left of the tabber, but code-wise that needs to come below the tabber. If this problem is solved with CSS-somethingorother, I think I can just put that table below 'C', right, and it'll do what it should do just fine.

my CSS friend said something about 'position:relative', except what I've found on that... isn't quite right? It all counts from the left. Well I don't know how far from the left. I know it's 0px from the right, and 0px from the top. augh!

I don't even have a hope of remembering a tenth of the search strings I've run through Google in the last 24 hours. I've looked at (variations on) css float, clear, table layouts, div stuff, 'fluid layout', 'width', most searches have 'site:community.wikia.com' - my eternal issue is that searching these forums is borderline impossible, or else i haven't figured out the trick; surely these questions i have are not unique, but finding previous threads is a rarity - Anyway, my point is, I've done everything I can think of to solve this. It's got to be something so simple! Why am I so dense?

As always, thank you so much for your help. 