Controlling of the column width

I have 3 colomns at

The blue column is 33% of the whole width.
The green column is 33% of the whole width.
The red column is 33% of the whole width.

I like to make it like the following.

Can I change the code of the page for making my tartegt result above with your help?

I’m sure you could work that out for yourself. You set them all to 33% so just the same format but with the new values. You need to target each item so you could add classes but as there are only three items you can use :first-child and :last-child pseudo classes instead.


.flex3 > a{flex:1 0 20%;}
.flex3 > a:first-child,
.flex3 > a:last-child {flex:1 0 40%;}

I am afraid that the page at shows nothing!
I think I didn’t apply your code correctly.

<a href="" style="background:blue"></a>
<a href="" style="background:green"></a>
<a href="" style="background:red"></a>

You can give each cell its own class, then you can style each class separately.

<a href="" class="leftcell"></a>
<a href="" class="midcell"></a>
<a href="" class="rightcell"></a>

CSS page:

.leftcell {width: 40%; background-color: blue;}
.lmidcell {width: 20%; background-color: green;}
.rightcell {width: 40%; background-color: red;}

My code was an addition to yours.

It is working though but you don’t have any content so nothing shows.

In your page you gave a height to the elements which is why they show.

box-sizing: border-box;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.