WordPress.org

Ready to get started?Download WordPress

Forums

CSS layout imprecision (14 posts)

  1. proxi
    Member
    Posted 8 years ago #

    First, feel free to criticize and comment on my blog, located at:

    http://www.martinbreton.com

    Second, I have a problem.

    Those of you surfing my blog in Firefox or Opera should not see any problem with the layout, but those who (God forbid) use IE will see what I mean. Since quite a lot of visitors use IE, I would appreciate my problem to get solved. I've tried a few things unsucessfully, but since I'm no CSS guru, I'd like your input.

    My blog is bilingual. Since I do not wish to use something like a language switcher, I decided my blog would have two columns, one in either language.

    To implement this, I used two div elements one called "colgauche" one called "coldroite" (yeah... french!). They both have slightly different CSS definitions. I'm reproducing them here for simplicity's sake.

    .colgauche
    {
    text-align:justify;
    float: left;
    width: 49%;
    }

    .coldroite
    {
    text-align:justify;
    width: 49%;
    margin-left: 51%;
    }

    So this works in Firefox and Opera, but in IE, the right column is wrongly placed vertically.

    How should I proceed to fix this?

    I'm open to other suggestions than these div. Anything, but tables, if possible. I just want it to work.

    Thanks!

    brem aka proxi

  2. pcmt
    Member
    Posted 8 years ago #

    Try setting your ".coldroite" with float:right and with no left margin. What I think is happening is that IE is seeing ".coldroite" with a width of 49% plus the left margin, and is forcing it beneath ".colgauche".

  3. proxi
    Member
    Posted 8 years ago #

    The problem if I do a float: right; is that what comes underneath the two columns will be placed BEFORE the two columns... because the rest of the text is not floating. Floating and non-floating items seem to not blend too well that way. Or do I miss something?

  4. moshu
    Member
    Posted 8 years ago #

    In cases like this the best thing is to use a "container" for the droite and gauche; and have the sidebar outside of that container. So, you'll float the gauche and droite inside the container and they will not mess with the rest of the site.

  5. proxi
    Member
    Posted 8 years ago #

    That's what I'm doing... I think. :)

    I have a div called container which contains the text and also the two div colgauche and coldroite.

    Can you illustrate with a little example?

    thanks!

    brem

  6. pcmt
    Member
    Posted 8 years ago #

    moshu is right. Put your colgauche and coldroite inside their own container with nothing else inside, then the left and right floats should work without disturbing anything else.

  7. proxi
    Member
    Posted 8 years ago #

    I'll try that.

    brem

  8. proxi
    Member
    Posted 8 years ago #

    The thing is, I have an icon to the top right, for each category.
    How do I place my div s so that I have a 100px column at the right?

  9. proxi
    Member
    Posted 8 years ago #

    I tried many things... but I can't make it work in all 3 browsers (IE, Opera, Firefox) at the same time.

    Can someone tell me how I should proceed to:

    Have a section to the right with an icon, fixed at 100 pixels that will have a different icon for each category (that is already implemented, but not the layout).

    To the left, the text, in two columns of equal width take up the rest of the space.

    I don't know how to tell a div that it has to take up 100%-100px width.

    CSS sucks that way. *sigh*

    help!

    http://www.martinbreton.com

    brem

  10. uberwerks
    Member
    Posted 8 years ago #

    I'm no CSS expert, but I have had quite a time getting IE and Firefox to look alike with my site.

    I had your problem with my sidebar being thrown under my main text area and it all came back to my "width"'s. My site has a structure where the content and the sidebar are "wrapped" under a container (700px wide). Within that container I specified that my sidebar be 200px and my content be 500px. If my sidebar was over (due to margin: or padding:) it was thrown down below the content.

    Again, I'm no expert by any means, but I hope this gives you some ideas. I didn't use %'s like you do either, so I'm not sure if that will help you or not.

  11. kickass
    Member
    Posted 8 years ago #

    IE always needs a bit more room. Narrow your columns (and their wrapper) a bit. Keep narrowing bit by bit until you get the right behavior.

  12. kickass
    Member
    Posted 8 years ago #

    oh, and don't forget to use display: inline; on the floats, so IE doesn't double any margins, which would also cause this.

  13. proxi
    Member
    Posted 8 years ago #

    I did a little layout refactoring. I said the container of the two columns are now fixed at 80%. I personally find it totally crappy coding, but it's still better than the display I had before in IE.

    Any comments on my "new" layout?

    thanks folks.

  14. proxi
    Member
    Posted 8 years ago #

    Can anyone criticize and tell me what I could / should improve on the layout?

    I'm not entirely satisfied, but at least it looks half way decent on IE now.

    thanks folks.

    brem

Topic Closed

This topic has been closed to new replies.

About this Topic