Okay so, I have a website (not going to give the URL in case people think it’s a plug). But, I’ve never used DIV containers before and on the whole what I’ve done is working except for one page where it’s all to pot!
Basically I’m trying to get 3 containers to all align in a row centred in the middle of the page. Like this:
Or if viewed in low resolution stacked appropriately:
At the moment what I get is three lined up but aligned to the left of the page, like this:
The CSS looks like this:
.ContactCntr {
align-self:center;
width:100%;
max-width:1170px;
margin:0 auto;
background-color:#e9e9e9;
display: inline-block;
}
This contains all of the 3 blocks.
.form {
width:33%;
margin:auto;
max-width:400px;
padding-top: 50px;
display: inline-block;
}
.contact {
width:33%;
padding-left:15px;
padding-right:15px;
padding-top: 50px;
vertical-align:top;
text-align:justify;
display: inline-block;
margin: auto;
max-width: 450px;
}
This is the “text” in my example pictures.
.map {
width:33%;
vertical-align:top;
display: inline-block;
margin: auto;
padding-top:50px;
}
This is the iframe (Google maps).
I’ve been scratching my head how to solve this for a while now. Nothing I do seems to result in what I’m after. I bet it’s something really simple – but as I said before this is the first time I’ve messed with DIV containers….
Thanks,
Oli.