how to do boxes in the same line with some space?

[toplisek]

I have tested in Mozilla and IE my code:

#left{
    float: left;
    width: 256px;
    margin: 7px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
}

#right{
    position:absolute;
    left:295px;
    padding-left:7x;
    width: 256px;
    border-width: 1px;
    border-style: solid;
    margin-left: 280px;
} 

it is fine in IE but in Mozilla is not good. Can you advise what to change?

[Spiritvn]

Try this:

#left{
    float: left;
    width: 256px;
    margin: 7px 10px 7px 7px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
}

#right{
    float: left;    
    padding-left:7x;
    width: 256px;
    border-width: 1px;
    border-style: solid;
    margin-left: 20px;
}

[mwinter]

Specifying dimensions using pixels is not usually a good thing. Font-relative units such as ems are better, at least when used in relation to text.

An alternative to Spiritvn's twice-floated solution is to float one element (usually the left-most) and add a margin to the right. Whether that's better depends on why you want to render two elements adjacent to one another.

It's best not to use class names like "left" and "right". Use semantic names that convey what the class represents (navigation, notes, content, etc.) not how it is rendered.

[toplisek]

Code does not work.
It will be not in the same line.

[Spiritvn]

Code does not work.
It will be not in the same line.

It's becoz of ur container id or class.

If ur container id or class fixed a width smaller than the sum of two box included padding & margin sizes, it will drop down.

2 mwinter: yep, i know px is not good than em or %, but it's just an example