Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
There's a few ways to do it. You can use a table, flex box, or just set them to inline-block with a width setting.
The box sizing setting is important when using % width and margin - without it, the border adds extra width, and even 1px can make the layout behave oddly on different resolutions.
Code
[progress=1/5] Bar 1 [/progress][progress=2/5] Bar 2 [/progress][progress=3/5] Bar 3 [/progress][progress=4/5] Bar 4 [/progress]
[style]
.expbar {
display: inline-block;
width: 48%;
margin: 0.3em 1%;
box-sizing: border-box;
}
[/style]
