Question

I have searched for ages looking for an answer to this question!

I am using a 12 column layout for a new website I’m making. I have 4 divs on 1 row:

<div class="colContainer">
        <div class="row">
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg">
                <p>Row 1: three</p>
            </div>
            <div class="threecolImg last">
                <p>Row 1: three</p>
            </div>
        </div>
    </div>

And my CSS is as follows:

.colContainer {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.threecolImg {
float: left;
min-height: 1px;
width: 22.05%;
}

as it stands the divs are all next to each other (which is good!) but not centered (which is bad!)

could some one help me to centre them?!

Many Thanks,

Paul

Answer 1

Replace all your threecolImg divs with threecol divs. And they will be centered.

<div class="colContainer">
    <div class="row">
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol">
            <p>Row 1: three</p>
        </div>
        <div class="threecol last">
            <p>Row 1: three</p>
        </div>
    </div>
</div>

Also remove from your CSS :

.threecolImg {
  float: left;
  min-height: 1px;
  width: 22.05%;
}

And if you want to style images in threecol divs, prefer that selector :

.threecol img {

}