Grow your CSS skills. Land your dream job.

Problems with positioning divs

  • # May 5, 2013 at 2:08 am

    Hey everyone! I’m new to css/html and I would really appreciate if anyone could help me out. I can’t figure out how to position my divs/images, so they will look like just I described below.

    http://i.stack.imgur.com/NE30j.jpg

    http://i.stack.imgur.com/x0dFx.jpg

    THANKS!

    podstrigis.com/test (check it with firebug)

    # May 5, 2013 at 3:05 am

    Quite simply…you can’t do that yet in HTML & CSS.

    There are developments on the **far** horizon which will move web design closer to print work but they are a fair way off.

    At the moment we just can’t wrap text around an image like that. Current HMTL & CSS is all built on rectangles. We have techniques and tricks that might make it look like we have circles and triangles etc but…really…they are still boxes.

    The dog image we could do the motion and sliding around but the text wrapping? Nope!

    # May 5, 2013 at 3:11 am

    Thanks! It would take ages for me to find out this. So it is possible to make a rectangular like this ->

    http://i.imgur.com/ot6mtgY.jpg

    ??

    # May 5, 2013 at 3:31 am

    If you mean on top of the page but not affecting things underneath then yes.

    A quick mock-up up: http://codepen.io/Paulie-D/pen/uypHn

    # May 5, 2013 at 3:50 am

    Thanks Paulie, but that doesn’t work. Here’s what I got when I used your mockup.

    http://i.imgur.com/0GAeJ6t.jpg

    # May 5, 2013 at 3:51 am

    That’s my page code. Maybe I have missed something?

    http://codepen.io/anon/pen/mxgro

    # May 5, 2013 at 3:54 am

    You will have to adjust some of the numbers I put in.

    But it’s basically doing what you wanted isn’t it?

    # May 5, 2013 at 4:13 am

    As far as I know, “absolute” tag will not coupe with responsive design of my theme

    If I position my image div container with proper numbers for full width window, it will not float along with other elements if I tighten up my brwoser window.

    http://i.imgur.com/tOQK3Zl.jpg
    http://i.imgur.com/zrzlXg0.jpg

    ANyway, I really appreciate that you tried to help me out. I think it will take a heap load of time before I will figure out myself @ lol

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

You must be logged in to reply to this topic.

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