Making Div Width Responsive

Question

I am wanting to make several 'blocks' of text go from this:

|1| |2| |3| |4| |5| |6|

When viewed on a screen wider than a tablet, to be responsive according to the smaller screen size, like this:

On tablet:

| 1 | | 2 | | 3 |

| 4 | | 5 | | 6 |

On mobile:

|1|

|2|

|3|

|4|

|5|

|6|

The full width when all 6 blocks are in a line is 980px. So each div is 1/6th of this width (approx 163px). What I would also like is for each div to have a responsive width according to the screen size viewed and to be centered on the screen.

So far I am using float:left, but all this is doing is keeping the blocks to the left of the screen when viewed on a smaller screen leaving a big gap to the right of the block, which is not what I want. I'd like the blocks to be centered.

I am using DIVs to create the blocks, but not sure if this is the best way to go? Here is the code I am using atm:

#block {
width: 163.33px;
float: left;
padding: 0px;        
}

If any one has any ideas on how I can do this, that would be great :-)

Answer 1

try this css

#block {
width: 163.33px;
display:inline-clock;
padding: 0px;        
}

#block parent block

{
text-align-center;
}

Answer 2

If I may share an idea, you can do that by confining the text blocks into a single element. For example:

|A| = ||1| |2| |3| |4| |5| |6||

When your html is responsive, it will automatically displayed |A| as your mentioned will. How to make your html responsive can be read here .