I have to say. layout with CSS is atrocious. Every object feels like an obstinate child hell bent on doing exactly opposite of what I want…
Anyway with that rant out of the way, I’m on the Simon game, and I’m trying to use divs to make my shape. How do I get the darn things to line up?
When it comes to CSS art, I find the best solution is to use position: absolute on the children. The parent wrapper can be position: relative or absolute; it just has to be recognized as the parent when positioning the children elements.
Doing so puts you in complete control of each element - you have to manually set their width and height, as well as their left and top position, which by default will be 0. Sibling elements will completely be independent of each other, removing any interference. As such, margin-left/top will be the same as left/top and the display property will be ignored.
As for units, I recommend setting up a base height and width with the parent, then using percentages for all children elements. This keeps the children’s position and dimensions intact even if you were to change the parents’ width/height.
Here’s a sample fiddle.
Thank you so much! This is a tremendous help!
Just to add a different element/perspective to what jx said eloquently, with CSS with every ‘div’ you’ve kind of got another ‘box’ inside a ‘box’, rather not quite unlike those classic ‘Matryoshka dolls’.
‘absolute’ positioning totally does help for ‘children’ of the ‘parent’, but sometimes it can even still feel a little confusing to figure out exactly what it is all ‘relative to’.
Sometimes I find it useful in my thinking to just conceptually ‘color’ the parent, draw out its box, or print it out to help in my thinking ‘okay, I know I am inside this higher level div, thus its position is relative’, but relative to ‘what’ ?
To be honest, I still think the ‘relative canvas’ model, used in a lot of ‘straight up’ computer graphics would make a lot more sense to me. But this sort of ‘relative design modality’ is not all that foreign to traditional graphic designers.
I’m not a GD by trade, but personally I found this book pretty enlightening as to the design audience much of CSS3/HTML5 is sort of ‘speaking to’.
It is also kind of a ‘classic’ in its field in its own right.
Hope this is of some help…
Well, absolute positioning looks at the nearest ancestor with a defined position; ancestors with the default position value of “static” are ignored. If there isn’t one, it looks at the body/HTML.
In practice, though, you’ll probably give its parent a position value anyhow. The whole skipping a static ancestor thing is more of a gotcha really, at least from my experiences.
On the other hand, position: relative, as a child, will always consider its direct parent as the ancestor that it’s relative to. In fact, it isn’t that different from static other than allowing the element to use left/top and to be recognized as an absolute child’s relative ancestor.
It helps to keep in mind that an absolute positioned child is essentially isolated. It’s not concerned with its siblings nor any of its ancestors except one.
