Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning with margin vs absolute

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #40309
    margaux
    Participant

    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!

    #111931
    i3a1l3y
    Member

    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

    #111932
    Paulie_D
    Member
    #111933
    Paulie_D
    Member

    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.

    #111934
    Paulie_D
    Member

    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

    #111940
    margaux
    Participant

    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

    #112007
    margaux
    Participant

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

    #112044
    Paulie_D
    Member

    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.

    #112119
    margaux
    Participant

    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

    #112122
    Paulie_D
    Member

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

    You can google it.

    #112139
    margaux
    Participant

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

    #112235
    JoniGiuro
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.