Treehouse: Grow your CSS skills. Land your dream job.

layout problem in firefox

  • # April 25, 2011 at 2:15 pm


    I have this section of a website that doesn’t display the way I want in firefox, it works in safari and chrome

    the styling for the content2 (the white background content) is

    float: left;
    background: white;
    height: 656px;
    margin-top: 20px;
    margin-left: 70px;

    the content is wrapped in a 960 width centered layout and all the element in it are floated

    is just that in firefox the div starts upper than in safari and in chrome also if you noticed the img on the first content (the blue background) it’s upper than it needs to be.

    hope you can help!

    # April 25, 2011 at 6:32 pm

    I changed your css rule for #in_content1 from

    #in_content1 {
    float: left;


    #in_content1 {
    height: 403px;

    it looks good on my end. Try that and tell me what you think

    # April 25, 2011 at 6:42 pm

    ps. I would not float the div left. I would add a margin-left to it but just enough to equal on both sides. You want the same amount of space on the left as you have on the right. Floating it left gives you much more space on the right than it does on the left. I would trim down that photo in the header from istockphoto. It is way to big. You don’t need all that space on the right side of it. just position it where you want it to be. then put some margin left on the div. I came up with about 40px and it looks pretty good.

    # April 25, 2011 at 10:13 pm

    You also have a layout problem in IE7. Firefox is not the culprit and negative margins are never a good idea.

    I didn’t look at your code in detail, because if Firefox shows you a mess then you need to revise your coding. You also have a big scroll bar at the bottom in all browsers, which means that you have not centered your content correctly.

    Tambien tienes algunas errores de ortografia evidentes.

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

You must be logged in to reply to this topic.