Hi, was just wondering if anyone could help.

 

While doing a bit of web design I got stuck with div tags, so decided to change where the divs would be into images.

But basiclly I need to have about 5 divs next to each other and then if a smaller sreen size was used the divs would drop down.

 

Any help would be greatful.

 

(Web address below)

http://a1cleaningsupplies.com/products/paper-supplies.html

Hi, try something like this ...

 

HTML

<div class="container">
<div class="box">
   	1
    </div>
    <div class="box">
   	2
    </div>
    <div class="box">
   	3
    </div>
    <div class="box">
   	4
    </div>
    <div class="box">
   	5
    </div>
 <div class="clear"></div>
</div>
</body>

 

CSS

 

.container { width:950px; margin:0 auto; background-color:gray;}
.box { float:left; background-color:red; width:17.9%; margin:10px;}
.clear { clear:both;

.

Hi, try something like this ...

 

HTML

<div class="container">
<div class="box">
   	1
    </div>
    <div class="box">
   	2
    </div>
    <div class="box">
   	3
    </div>
    <div class="box">
   	4
    </div>
    <div class="box">
   	5
    </div>
 <div class="clear"></div>
</div>
</body>

 

CSS

 

.container { width:950px; margin:0 auto; background-color:gray;}
.box { float:left; background-color:red; width:17.9%; margin:10px;}
.clear { clear:both;

 

 

That seemed to work very well thank-you just a few color tweeks.

 

Could you tell me how i could add the clolor black as the outline for each seperate box please?

.box {float:left; background-color:red; width:17.9%; margin:10px; border:5px solid black;}

 

you might want to adjust your margin... depending on how many pxs you set your border is

.box {float:left; background-color:red; width:17.9%; margin:10px; border:5px solid black;}

 

you might want to adjust your margin... depending on how many pxs you set your border is

 

What he said