CSS layout imprecision

  • proxi

    (@proxi)


    20 years, 9 months 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

Viewing 13 replies - 1 through 13 (of 13 total)
  • pcmt

    (@pcmt)

    20 years, 9 months 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”.

    Thread Starter proxi

    (@proxi)

    20 years, 9 months 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?

    moshu

    (@moshu)

    20 years, 9 months 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.

    Thread Starter proxi

    (@proxi)

    20 years, 9 months 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

    pcmt

    (@pcmt)

    20 years, 9 months 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.

    Thread Starter proxi

    (@proxi)

    20 years, 9 months ago

    I’ll try that.

    brem

    Thread Starter proxi

    (@proxi)

    20 years, 9 months 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?

    Thread Starter proxi

    (@proxi)

    20 years, 9 months 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

    uberwerks

    (@uberwerks)

    20 years, 9 months 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.

    kickass

    (@kickass)

    20 years, 9 months 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.

    kickass

    (@kickass)

    20 years, 9 months 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.

    Thread Starter proxi

    (@proxi)

    20 years, 9 months 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.

    Thread Starter proxi

    (@proxi)

    20 years, 8 months 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

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘CSS layout imprecision’ is closed to new replies.