Positioning with margin vs absolute

[margaux]

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!

[i3a1l3y]

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

[Paulie_D]

Here’s Chris’ video on positioning: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

and another on floats: https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/

[Paulie_D]

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.

[Paulie_D]

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

[margaux]

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

[margaux]

@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!

[Paulie_D]

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.

[margaux]

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

[Paulie_D]

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

You can google it.

[margaux]

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

[JoniGiuro]

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

[Author]

Posts