 You don't need to be an 'investor' to invest in Singletrack: 6 days left: 95% of target - Find out more
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:
[img] 
[/img]
Or if viewed in low resolution stacked appropriately:
[img] 
[/img]
At the moment what I get is three lined up but aligned to the left of the page, like this:
[img] 
[/img]
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.
You want another div to wrap the three content ones then apply the "center" to that.
That is assuming I've understood your diagrams correctly and each "box" is a div in your html. Here's a link https://css-tricks.com/centering-css-complete-guide/
Try changing all occurrences of
display: inline-block;
to
display: block;
Okay - so I tried changing all the in-line block occurences to just block, but I've ended up with a page that looks like this:[img] 
[/img]
It doesn't seem to matter how wide the page is, all of the blocks are stacked vertically instead of horizontally?
I looked at that other link but I'm a bit confused about the flex DIV. Do I leave me CSS along in the other containers and just wrap them inside a flex one?
Thanks guys.
good work on 'not giving the URL away' btw. have you considered a job at MI5? 😉
Here it is using inline-blocks:
https://jsfiddle.net/p7Lrvg01/
The nasty bit is that you need to have no space between the inner divs in the HTML, otherwise you get spaces between your blocks.
And here it is using blocks. You need to use "float" to get blocks to line up alongside each other.
https://jsfiddle.net/8Luvgr2w/
Haha - I'd do a better job than you....Locost builders isn't my website - I'm just using it to host the pictures as chrome remembers my password for it but not photobucket right now 😉
Think of block elements as all being on their own line:
These
are
block
elements
Flexbox is a whole different ball game and you might not want to go there!
If you wrap the three boxes you want to be centred in another div then that div will be just the right size to contain the three boxes (plus any margins they might have). By default this wrapper will be left aligned so to centre it do:
margin: 0 auto;
Basically you can apply the centring to a single element not a group of them
[url= http://getbootstrap.com/ ]have you thought of using Bootstrap?[/url]
Okay getting close...I tried the "flex" trick on the container that wraps the other 3 containers and it's now adjusting and displaying correctly - until you open it on a phone / make the window narrow, at which point the 3 containers all end up on top of each other instead of stacked.
So close....
Oh - had never heard of Bootstrap. I'll take a look - although the rest of the site is fine.
Ah. Have you set the container to be display: flex; ? If so then the items inside need their flex-wrap property set http://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
[url= http://codepen.io/anon/pen/WRpKOg ]http://codepen.io/anon/pen/WRpKOg[/url]
Flexbox is your friend. But will need fallbacks for older browsers.
Would anyone use media queries to do this?
If you want it to go straight from three horizontal to three vertical, rather than via 2+1 at intermediate resolutions then I think you need either media queries or flexbox.
I wouldn't use flexbox as a complete novice. It's quite confusing... Inline-block and float is the traditional way, they both do pretty much the same thing with some minor variations in behaviour.
To center, you can apply text-align:center to the parent element. Or place the 3 blocks in a div with margin:auto 0; which basically gives it equal margins at each side and pushes the div to the center.
And this...
If you want it to go straight from three horizontal to three vertical, rather than via 2+1 at intermediate resolutions then I think you need either media queries or flexbox.
Media queries are your friend for responsive code. So say when you go from one screen size to another, you can switch from inline-block, to block, for example.