Hello, The following problems occur because the height of my container is not pre-determined - it can vary, and is unknown. I have experimented using query to sort out positioning, but there are two reasons I do not wish to use jquery: this layout would be repeated multiple times on a single page, so I am concerned about, one, page loading times, and two, unique ids (if I reference a class or ID, it would occur multiple times on one page). How can I align two elements side by side? I have a column layout. The column on the left requiring items to be aligned to the top, and the column on the right requiring items to be aligned to the bottom. As per my example, here: http://jsfiddle.net/uBn5Z/ In my example above, I am trying to remove the space that appears below the content in the left column. I want the 'signature' item to be horizontally aligned with the bottom of the content in the left column. The gap should be removed. I thought this might be because of widths being specified not equalling the total width when padding and margins are considered, therefore the item being 'pushed down'. Although I have looked into that possibility, it could still be true. In another example, you can see I have managed to align the 'signature' to the bottom, however there is overlap between the content:http://jsfiddle.net/uBn5Z/6/ (I have tried using 'clear: both', but it didn't work) The examples above are what I have been able to achieve. Here is an mock-up of what I want to achieve:
That's really gross. Please toss that presentational, non semantic and invalid markup dafuq away! Although this particular example doesn't fail to demonstrate the evolution of coding practices from late 90's to late 2010's, going from awfully bad, to FAR WORSE. For 15 bloody years people have been told to forget once and for all using tables for layout, which they did, eventually. But due to a global misunderstanding, the thought that TABLE was created by nazis in order to ruin the web spread like a plague. So what happened next? The semantic meaning of TABLE, presenting tabular data ( data with row-column relation) was thrown in a ditch and buried. Instead, people started to abuse DIV the same way they did with tables, leading to utterly meaningless and useless websites. And what was the next logical step in this "transition of dumbness"? You guessed correctly, dwelling DP members! It's that stupid html5 with its stupid tags like SECTION, ARTICLE, HEADER and FOOTER. It was a terrible mistake, though. Instead of abusing one element, as utter nubes did previously (first TABLE, then DIV), masses started to overuse 5-6 elements at a time. "Yaaay!! Thanks to HTML5, my website size went up for 5MB per page. That is SO COOL" -- NOT. And blah blah blah, some more blah blah blah about the sad history of our beloved web. I could go on and on, without making a valid point here. You, my dear friend, are in second stage of the "transition of dumbness". I went on and counted the number of non semantic elements in your fiddle: We've got 15 DIV tags (+ a number of ghost end tags) and 7 SPAN tags. Of all meaningful elements, you've used 3 in total: HR (misused in this context, instead of using it to change the subject when numbered headings aren't appropriate, you used it to draw a line), STRONG (also misused: strong gives emphasis but DOESN'T replace font-weight:bold) and BR (yay, you can break a line!). From what I see here, you have a PSD design (another evil buzzword) of a forum template you're trying to slice, forum post in particular. And that is exactly what led to the mistakes you made: your markup is dictated by a design some scam artist created in photoshop, who might know a thing or two about aesthetics, but jack squat about html and internet. It should be the other way around: semantic markup first, and then designS (yes plural). Yaah, why the heck not in photoshop? That said, take a pen and a piece of paper if it's easier for you that way, draw a sketch of your PSD design, and write a semantic markup accordingly. That seems to be the only way to salvage your design (it does look nice, I have to admit). You will undoubtedly notice that there's a row-col relation between the user column and post body. Who says rows and columns, usually is tempted to say TABLE. Yes, table. But table the right way (kudos deathshadow), not only tr and td as you could have seen a plethora of times. I know that you're most likely to hate me after this post, but hell, the right answer is not necessarily an answer You would want to hear (ask a bad student after his exams). Hope it helps, no rage intended. It's just that the ride of the Web was a bumpy one, and it was worth mentioning. Cheers
Wow, someone being harsher than me or... wait... ok, yeah, What Wiicker95 just said. ... this is one of the rare cases I'd advocate using tables -- but not for the reasons he listed. that signature placement is really what's gonna bite you hardest. Aligning it bottom while allowing it to have dynamic height (and you SHOULD allow that) is something non-table layouts just cannot do... Pretty much there are only TWO situations where tables should be used in this day and age: 1) tabular data... this isn't it. 2) layouts that non-tabular just cannot reliably accomplish, or would take more code to do so. You've really got a massive horde of DIV and span, as well as classes and inlined style -- none of that should even be in there. Really thinking on it, you have a choice -- you can have that signature flush bottom using tables, or you can use DIV and have it ride up. A 'rough' version of how I'd approach that: With tables: http://www.cutcodedown.com/for_others/balmoral/template.html Without tables: http://www.cutcodedown.com/for_others/balmoral/template2.html and as with all my examples the directory: http://www.cutcodedown.com/for_others/balmoral/ ... is wide open for easy access to the gooey bits and pieces. Notice I opened them up fully fluid so they fit whatever container they are in -- that container being semi-fluid since declaring a fixed width is inaccessible rubbish. I had to use a 'trick' to fake the APPEARANCE of the left column being full height -- so called 'faux-columns'; this method allowing the width of that column to be elastic instead of an inaccessible fixed size that could break. word-wrap:break-word; helps prevent the layout from breaking should someone be a jackass with excessively long values. The table version is fugly, but it's the best way to put that signature at the bottom without fixing it's height. The DIV version isn't too different... in both cases they're effectively half the markup -- which is as it should be.
Sorry folks, but I had to get it out of my system... Just seeing <div class="i"><div class="gon"><div class="puque"><div style="nough"></div></div></div></div> makes me wanna blow chunks ^^ You can, by using relatively positioned containers and bottom property in css... I guess you meant to say without using styles. As for the rest, AMEN. Print it, frame it, and hang it somewhere in your bathroom. One's usually bright-minded and innovative when taking a shower, or something else... Ask Archimedes, if you ever encounter that weirdo.
No, you can't... Try it with dynamic height for the top aligned content and the bottom aligned signature. You cannot predict the bottom element's size or the top elements size, so you are looking at broken overlap... and there's no getting around that unless you fix the height of one or the other. To position it bottom you MUST take it out of flow (position:absolute) meaning you have to pad the bottom of the content to be sure there's room for it. If the siggy's height isn't fixed, you have no way to tell how much padding to use! Unless you don't want it to overlap the user box when it's too short, then you could put it after the floats, but that's an annoying waste of screen space. Display:table-cell could be used as a possible workaround, but you'd need extra wrappers since they both would need their own display:table-row's around them... and that's assuming you can get the info area to rowspan, and that's not gonna happen. A scripting assist could do it, but that's just a waste of code. edit - I might make a demo to see if I can make that work, just as an example of WHY it's better to suck it up, say **** semantics and use a table for this one very special case. A version using CSS3 layout might also be worth looking at -- though kiss off it working in older browsers or even future one given just how "draft" that still is. Seriously, try doing it. Unless you fix it's height, flat DIV can't do that no matter what you throw at it for style.
I agree that it cannot be done IF there's content in that container after the signature. But why couldn't you do it if there wasn't any? Not that there should be anything there after the signature. Hell, if nothing else, I would give my signature a margin-top and/or a min-height to my post container. That's an acceptable workaround. But anyways, I have always used tables for forum skins and I don't intend to change it any time soon. Great idea. You could as well post it on techtalkin in your series about html.