Grow your CSS skills. Land your dream job.

table vs div

  • # March 27, 2013 at 11:07 pm

    I know table is a bit outdated but each time use div there alignment issue. Any tips? Coz tried ‘text align:middle’ & ‘left margin/right margin:auto’ but still not playing nice with me.

    [website](http://www.mytravel22.com/login/kemaman/medium.html “website”)

    # March 28, 2013 at 12:06 am

    I suggest you got to codepen.io and make a use case of the troubles you are having. Once you run into a problem save the pen and post it back here so we can see exactly what kinda of problems you are having. Golden rule, divs are block elements that play nice with margins and position relative :)

    # March 28, 2013 at 12:07 am

    There really is no “table vs div”. It is better to think about elements as a flow. So you get separation to:

    – Inline elements: the things that follow the flow line by line.
    – Block elements: the things that steal the entire “line” to themselves.
    – Inline-block elements: the things that act as if they’re a single character on a line, but are otherwise treated like a block element.
    – Table elements: the things that steal the entire “line” to themselves, but otherwise act kinda like they’re inline-block elements (no 100% width by default). And of course cells have their own special set of rules.

    Then you have to remember these exceptions:

    – Floated elements are not in the flow, but flow elements avoid floated space.
    – Absolute and fixed elements are not in the flow. And also ignore floats.

    Using floats to create layouts is a hack just like tables are, floats just allow for much cleaner HTML and better semantics despite not being the perfect solution. Flexbox and grids are coming in the future and those will make layouts less hacky in nature. In any case you want to learn how elements flow on the page, as that will also explain why `margin: 0 auto;` works in some cases and why it doesn’t work in others.

    # March 28, 2013 at 1:49 am

    Thanks John & Merri for both your comment & advise. Finally it works!

    [under codepen](http://codepen.io/moer2237/pen/nedws “”)

    Now how do I make the bullets closer/tighter in the middle without making rest haywire coz the rslide in at 1227px

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

You must be logged in to reply to this topic.

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