Grow your CSS skills. Land your dream job.

Positioning with margin vs absolute

  • # October 15, 2012 at 4:26 pm

    I really struggle with css positioning and wonder if someone could recommend some resources that would explain the concepts of it to me. Everytime I read about flow, float, overflow, clear I think I understand it but when I try to put it into practice… well that’s another thing.

    For example, take a look at [this page](http://www.kjx.me.uk/servicesTest.php). Initially I tried using position:relative on the parent div (servicesWrap) and position:absolute on the 5 child divs. Failed miserably. Then I read some threads here which suggested using margins and paddings and I have a passable result.

    So a couple of questions:

    1. Is this a good way to code this page? Please feel free to suggest improvements on the code and design.

    2. Any suggestions for getting to grips with css positioning?

    Thanks!

    # October 15, 2012 at 4:43 pm

    You need to elaborate if you want some help regarding some specific coding on that page.

    For CSS resources you should google “W3 CSS” – that strips it right back to basics.

    B

    # October 15, 2012 at 4:50 pm

    In general…for myself, I only use positioning if I cannot get an element in EXACTLY the place I want it in any other way.

    I find floats, margins & padding can do the vast majority of the work for me.

    That is not to say that positioning does not have its place but, again, for myself, I firmly believe that it should be used sparingly…if at all.

    # October 15, 2012 at 4:55 pm

    In the page you referenced, the central element is perhaps the simplest.

    Have a wrapping div with a background image and then four equal sized divs inside it.

    If you float them they’ll just fall into place. Use percentages instead of px widths and it’ll be responsive too.

    In fact, the only thing you will need to ‘position’ is the containing div’s background image.

    Something like this: http://codepen.io/anon/pen/FKHoE

    # October 15, 2012 at 6:53 pm

    Thanks @ Paulie_D, another elegant solution. I have viewed one of the videos you suggested and will have a look at the other. I hope you don’t mind all the questions, but its a great way to learn.

    @i3a1l3y – thanks for your reply

    # October 16, 2012 at 3:48 pm

    @Paulie_D, I tried the above solution on another page (actually the one you suggested I use figcaption).

    Here’s [the before page](http://www.kjx.co.uk/case.php) where I’d used floats and the [the after page](http://www.kjx.co.uk/caseTest.php ). They behave similarly but I was wondering if it were possible to center the content and ensure that there are always 2 boxes on a line as the browser window is resized. The pertinent css is at the end of the css file, case and new case.

    thanks for all your help!

    # October 17, 2012 at 4:22 am

    On your linked After page, remove the max-width from #wrapper and everything is pretty much centered as far as I can tell.

    At least as far as around 720px. If you need it to be even more responsive below that size then you will need to employ media queries.

    I would remove the inline styling from the div holding the link. Just give it a class and apply the CSS in your stylesheet.

    # October 17, 2012 at 12:20 pm

    Sorry – I provided the wrong links – before is http://www.kjx.me.uk/case.php and after is http://www.kjx.me.uk/caseTest.php

    # October 17, 2012 at 12:28 pm

    Firstly, look into a small javascript file that will make the four elements the same height.

    You can google it.

    # October 17, 2012 at 3:13 pm

    Yeah, I had a feeling it was to do with the different heights. Thanks for all your help and patience, really appreciate it!

    # October 18, 2012 at 3:56 am

    don’ know if this might help (click on text to adjust height for two column-layouts only) http://codepen.io/jonigiuro/pen/rlzFh

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".