Question

I have two CSS classes:

.class1 {
    height: 100%;
    width: 300px;
    border: 1px none #B0B0B0;
    position: relative;
    display: inline;
    left: 10px;
}
.class2 {
    height: 100%;
    width: 200px;
    position: relative;
    display: inline;
    margin-left: 15px;
    background-color: #00CCCC;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

Now, as you can see, they’re both set to display in a line (no line breaks in between elements). Which works correctly. But for some reason, ever since I set the display to inline, the Padding, the Positioning and the Margin CSS have all just stopped working. I can add a margin-left 10inches and nothing will happen. Same with padding and positioning.

Can anyone explain how to fix this?

Also, I have the relative position set on both classes, yet when viewing the page in a browser, .class2 over laps .class1 when its supposed to be just after .class1.

Any ideas?

EDIT:

Okay, so I’ve done a JSFiddle, but it seems to be playing up even more there….

Looks like the Width is not working….

here it is:

http://jsfiddle.net/zYbwh/1/

Answer 1

You need to use

display: inline-block;

instead. margin doesn’t work with display: inline elements, however with inline-block it does. You can then have an inline element with margins and explicit widths/heights.

To make this work in IE7, add these two lines:

*display: inline;
zoom: 1;

It’s horrible, but it works.