CSS Forum

**blackhawkpowers** · 11:34 PM

I know this is a simple issue but I for the life of me can't fix it I have 5 containers and I want them to be on the screen from left to right but instead they stack themselves vertically the code is as follows

.container {
width: 20%;
border: 1px dashed red;
}

the html looks like
<html>
<body>
<div class="container"> test </div>
<div class="container"> test </div>
<div class="container"> test </div>
<div class="container"> test </div>
<div class="container"> test </div>
</body>
</html>

well I figured it out and I just needed to float the containers left and it works fine

**travelagent** · 01-19-2007, 01:28 AM

I see where you fixed it, but for those who struggle with the same problem, here's how to solve it:

HTML:
<div class="block1">Text</div>
<div class="block2">Text</div>
<div class="block3">Text</div>

CSS:
.block1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.block2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.block3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}