how do you inline div/block elements properly?

[heyo]

Hello, I've included a screenshot of my problem..

I've been trying set inline a number of div element blocks, so they line up horizontally. Whats the best method/solution to this?

I've tried clear:both, display:inline, display:inline-block - to no success..

As you can see I'm trying to line up the green boxes horizontally:


Heres my code: (Green boxes are the last two divs)

div#welcome-box{
position:relative;
display:block;
background-color:#A0A0A4;
border-width:medium;
border-style:solid;
border-color:#FF0000;
width:70%;
height:120px;
}
div.welcome-box-msg{
display:block;
width:100%;
height:20px;
background-color:#FFFFFF;
}

div#welcome-box-my-stats{
float:left;
height:100px;
background-color:#A0A0A4;
border-width:medium;
border-style:solid;
border-color:#00FF00;
width:50%;
clear:both;
}

div#welcome-box-my-inbox{
position:relative;
float:right;
right:0px;
left:auto;
top:0px;
height:100px;
bottom: auto;
background-color:#A0A0A4;
border-width:medium;
border-style:solid;
border-color:#00FF00;
width:50%;
clear:both;
}


thx in advance

[heyo]

ok the problem was that 50% + 50% did not equal to the 100% width content??? dont ask me why...

so i changed one to 49.9% instead and it fit.. strange

[karinne]

It's because of the border