CSS - Making Divs Center Inside Parent Container Div
Getting child divs to cooperate by centering when they are inside a parent container can be accomplished a number of ways, but it is so much easier now that we can use Flexbox property.
Initial html and css using floats
Before flexbox
The child divs float nicely into rows of three, but they're not centered within the parent container
One
Two
Three
Four
Five
Six
Using Flex
We'll apply display:flex, flex-wrap:wrap (so that the divs wrap), justify-content:center to the parent and we'll remove the float:left from the child divs and will also tell them not to shrink or grow (otherwise flex will ignore the width).
Another issue we'll have is that the divs won't center perfectly because of the margin on the last div in each row. To fix that, we'll target that third div using CSS and remove the right margin.
Another issue we'll have is that the divs won't center perfectly because of the margin on the last div in each row. To fix that, we'll target every third div using CSS and remove the right margin.
Child Divs Centered Within Parent Div Container Using Flexbox
One
Two
Three
Four
Five
Six
Sticky Side Column
If you're using our PHP Website Template, this is the optional side bar column you can add to some or all of your pages. It can be useful for adding advertisements such as Adsense ads to be displayed on multiple pages.
When you include the side column, your main content will automatically adjust its width to accommodate it.
The side bar is 'sticky'; it will scroll down and remain in view.
You can turn on/off the side bar column per page by defining the $showSide option located at the top of each file.