Align content elements within parent container

I have a container (for argument's sake, let's say it's a div) which has a different number of elements inside it.

The parent container can be resized, and I want for the content elements to resize as well, but... I have some requirements.
Four elements: 1,2,3,4
1,3 and 4 are the same size, 2 is twice the size of 1
I want to be able to have them resize based on the width of the parent container, but keep their aspect ratios (more or less, at least).
There will never be MORE than 4 elements on a row, but there might be less - and if less than 4, all the elements should have the same size.

Now - this is probably doable in jQuery - but I'm a little lost as to how to even start. Can anyone provide me some code, examples, tips to what I should google?

 

You could accomplish something like this with CSS (media queries).

 

When you say same size, do you mean width or height? In general though, it SOUNDS like you're trying to use layout techniques that have no business in a fluid (aka resizeable) layout in the first place; if these actually have content in them, changing the width means they should need to grow in height to show the same amount of content -- changing the aspect ratio. Trying to force them to stay the same ratio either means resizing the content (bad) or chopping it off (worse).

But again, your content should be dictating the layout, not the other way around... and it SOUNDS like you've got that backwards... It also sounds like a layout issue, and that usually belongs in HTML/CSS, NOT scripting. Quite possibly this is another example of "That ain't working, that's not how you do it. JS for nothing and your scripts for free."

But that's a wild guess though without seeing the content or in general what it is you're trying to do.

 

Well... I'm talking width, mostly. And yes, of course the height have to "stretch" to fit all the content if width is changed - what I meant was that the sizes should stay more or less the same between 1,3 and 4, and keep being more or less twice the size for 2.
This can probably be achieved with pure CSS, but as far as I know, CSS lacks some basic stuff like proper mixing of different types of size-settings (px, em, % doesn't really talk that well with eachother), and I'm a little stumped on how to create specific rules depending on how many elements there are in one row. I could probably introduce some classes based on a count of elements in the backend...

 

Well, sounds like you want three 20% columns and one auto-adjusting... you could then mix padding if desired if the column widths don't have to be precise. Think about it, 1+1+2+1 == 5, 1/5th = 20%.

One of the BIGGEST mistakes people make in putting together columns is having the 'fixed width mentality' of declaring width on EVERYTHING. It's why even when someone insists on fixed width I usually still design fluid as it's easier, then just force the width on the outermost wrapper. (which I'd usually have anyways for centering since BODY is unreliable). Most of the time you don't have to be precise (a flaw in the whole 'grid' asshattery way of doing things) you just have to be consistent.

Display:table-cell or display:inline-block may also be part of the answer depending on if you 'need' to preserve source order and how important legacy browser support is -- if source-order is unimportant just put column 3 last in the markup and float columns 1+2 left and float column 4 right -- remembering to set column three to indent wrapping via overflow:hidden and a haslayout trigger (like zoom:1 and NOT float it or set a width on it. Leaving at least one of your columns fluid (usually the widest one) is the easiest way to not have layouts like that end up biting you in the backside.

If they have to be precise width, your first, second and fourth columns should be double-wrapped with div -- the other one to set the width, the inner one to set any padding/border style. Otherwise your 'larger' column would be whatever is left over for width after your padding or borders, which could actually result in it being smaller depending on the size of that padding.

... and land's sake do NOT try to use margins on this! Good rule of thumb is that margins should be your last resort as they are often unpredictable due to collapse. Even if you understand how/where/when collapse occurs, you're usually safer avoiding it entirely.

... and if you REALLY don't care about IE, you could try using flex-box; but even across the modern browsers that's still an inconsistent mess that's not ready for prime-time.

Usually if I have a larger column that's content, so I do a content-first layout using negative margins and elastic columns -- I'd consider that for this using three columns declared in EM and one fluid, but again I'd have to know what the data is and what it's supposed to look like before I could say much more.

 

And that's just the problem - margins Since you cannot declare a width: 20% including margins; (which of course would made my world so much simpler)...
I would love to show you the layout, but it's behind a login-screen, and I cannot provide the url. :/
However, it's basically a user-profile, with one box being for an image (this is consistent, and will not change except height-wise, as the image is set to a size limit in the backend), second being for contact information (name, email, phone etc.) <- this is the one that needs to be larger, simply to avoid having too many double-lines and such (unless the page is being viewed on a really tiny screen/resolution), three and four are basically seconday information, like whether or not the user has access to certain stuff etc. and courses the user has attended. These are also more or less fixed width.

I'm thinking I can probably do this via a combination of PHP (backend) and CSS - I could leave the second column to just take up leftover space after assigning the other three fixed widths - and just use @media-queries in the CSS to avoid having to fiddle too much with smaller screens...

 

Well you could dump it out as a MHT or save as the markup and include the style. Usually when working on layout issues I do the HTML/CSS separate from the PHP, then break it into pieces for the PHP later. It's usually just easier to get a handle on it without the back-end code in the way -- particularly layout.

Sounds to me like you've got one fixed column, and three/four should be elastic widths leaving two fluid....

The backend really shouldn't play into making the layout part work -- you should concentrate on semantic markup and semantically neutral containers for the application of the style.

If you don't want to share public, feel free to PM me a .mht or .xht of the page. It's often the easiest way to work with things that are reliant on the back end to build the markup -- save it from the browser as a working archive.

 

I'll muck about a bit more, and see if I can figure it out - or at least get a publicly available demo up and running.

 

PopSiCLe,

I coded up a page that you might use as a starting point:

https://gist.github.com/srveit/8466276 (index.html)
https://gist.github.com/srveit/8466298 (main.css)

It uses float, border-box box-sizing (see http://www.paulirish.com/2012/box-sizing-border-box-ftw/), and percentage widths.

Hope this helps.

 

Please try to google "jquery auto resize div" and see if the search results below helped.
http://jqueryui.com/resizable/#aspect-ratio
http://benalman.com/code/projects/jquery-resize/examples/resize/