cant layout four divs in row - please help

need to create four div containers in a row

[roytheboy]

Hello everyone-
I created 4 div containers in a row but when i resize the browser the third div jumps below the others- as if there is "clear" in the coding, but there isnt.Here is the CSS:

#recipePic1 {
margin: 0px;
padding: 0px;
height: 139px;
width: 25%;
background-color: #FFFFFF;
text-align: center;
float: right;
}
#recipePic2 {
margin: 0px;
padding: 0px;
height: 139px;
width: 25%;
background-color: #FFFFFF;
text-align: left;
float: left;
}
#recipePic3 {
margin: 0px;
padding: 0px;
height: 139px;
width: 25%;
background-color: #FFFFFF;
text-align: left;
float: left;
}
#recipePic4 {
margin: 0px;
padding: 0px;
height: 139px;
width: 25%;
background-color: #FFFFFF;
text-align: left;
float: left;

I need to keep them in a row and have tried not floating them to no avail. Can anyone please help!

Thanks! Roy

[kas187]

By default div's are block level elements meaning they take full width of the container unless you specifiy a width and height and float to compensate. I just tried the below css which gets the results you want
#recipePic1, #recipePic2, #recipePic3, #recipePic4 {width: 20%; height:139px; float: left;}.

[roytheboy]

Thanks kas187 that did the trick! All floating left.
I managed to make 3 divs 25% and 1 div 24% and visually it looks ok.
(i need to make them visually look centred when browser is stretched, hence making them as large as possible). I think floating one of the divs right threw the one beside it out.

Thanks once again! roytheboy.

[roytheboy]

Sorry, deleting duplicate post