Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Float and Margin fun

Discussion in 'Website Coding & Programming Forum:' started by LeVon, Jun 22, 2012.

  1. LeVon

    LeVon New Member

    Hi guys and gals,

    I'm hoping someone here could shine some light on a little problem I'm having.
    here is my dilemma:

    Edit this Fiddle - jsFiddle

    What I want is the Advert div to appear inside the gap created by the margin of the Content div. Typically this problem is resolved by changing the HTML so that the Advert div appears first in the order. Unfortunately I cannot change the HTML in this project.

    I'm hoping I am overlooking something simple, but now I am throwing the towel in. Any takers?

    and thanks!
  2. Squiddy

    Squiddy Guest

    Assign a width to the content div and float both the content and advert divs to the left. Alternatively you can float the advert to the right and control the gap between content and advert by the width of the container.
  3. graphicscove

    graphicscove Member

    If you have control of the CSS..

    The dirty way:
    Edit this Fiddle - jsFiddle
    (Not the best if you need the div to expand with content.. Actually just not the best in general)

    Or as Squiddy put float them both to the left with a little bit of margin to separate them.
    Edit this Fiddle - jsFiddle
  4. Squiddy

    Squiddy Guest

    Just to let you know the code in the first link you provided doesn't work graphicscove. Anyway, hope you've got your answer LeVon, I assumed you would be add the float and width properties yourself ;)
  5. LeVon

    LeVon New Member

    Hi Chaps,

    Thank you very much for providing great answers. The idea of negative margins completely escaped me and it seems to be the best option. Unfortunately the Content div had to remain flexable but it seems I have my answer.

    Out of curiosity though, let's say that the Advert div in the above example was actually a sidebar and the height could change depending on what it holds, how would I achieve the same effect?
    This is similar to a blog situation I have and although my question has been answered I would certainly like to hear your opinions.

    Here is how the blog looks at the moment:
    Edit this Fiddle - jsFiddle

    How can I chnage the HTML so that the Blog div appears before the Sidebar?
  6. Squiddy

    Squiddy Guest

    Can you give us a link to this blog? It would be nice to see what we're helping you with.

    What do you mean when you say it had to remain flexible?

    As for your second question, you already have this in the blog code, so just copy that and it will auto expand to fit the content. By default the height value is auto which will, obviously, auto adjust the height based on how much content is within it. The only limiting factor would be the height of the container div, which has also not been specified so again by default it will be set to auto and you don't have to worry about it.

    As for your second question, well what you've done is given a huge margin-right to the content div. This isn't a particularly good way of doing things as it's taking up way more space than it needs and makes it difficult, as you're finding out, to place other content. If you want the layout to be liquid (flexible/content areas auto resize for different resolutions) then you need to use %'s and not fixed widths.

    For example:

    <div id="container">
    <div id="blog">content</div>
    <div id="sidebar">content</div>

    width: 85%;
    margin: 0 auto;

    background-color: #F03;
    width: 65%;
    float: left;

    width: 30%;
    background-color: #F63;
    float: right;

    Oh and you don't need the margin-top: auto; so I took it out.

Share This Page