CODEWITHSUNDEEP
htmlcsscss-tables
user974254
user974254

Reputation: 21

Creating a 'Table' from divs in CSS/HTML

I have content in a 400px wide div that I would like repeated across the width of the screen with 30px spacing in between, similar to the layout of these blog modules.

The number of modules per row would depend on the width of the screen, like in the above example.

I am new to creating this kind of layout using divs. My biggest problem is getting the divs to lie beside each other with 30px in between and then starting on a new line. Any help would be greatly appreciated.

Upvotes: 1

Views: 636

Answers (3)

sandeep
sandeep

Reputation: 92803

you can achive this by give float or display:inline-block

CSS:

.block {
    margin-right: 30px;
    float: left;
    width: 400px;
    height:500px
}

.block:nth-child(3n+3){margin-right:0}

HTML:

<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>

Upvotes: 1

Upendra Chaudhari
Upendra Chaudhari

Reputation: 6543

Try this CSS :

.myclass {  
    margin-right: 30px;  
    float: left;  
    width: 400px;  
}

and HTML : 

    <div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
   </div>

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 691635

CSS:

div.block {
    margin-right: 30px;
    float: left;
    width: 400px;
}

HTML:

<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>

Upvotes: 0

Related Questions