I'm tryign to create this page: http://ascendancyconsulting.com/Landings/ACConsult1.html but I'm having issues getting things to center properly. I would liek to do this with out setting fixed widths if possible because I want it to scail somehwat iwth window size.
Notice what's happening: 1. The headline is not centering itself in the "shell" div. 2. The opt-in box ovlaps on the middle column when narrowing the window, instead of just stopping and creating a sideways scroll bar. 3. The 3 badges/button at the bottom are supposed ot be horizonatly in line but one of them is displaying underneath; and they also (if possible) should move to the left as the window narrows instead of stopping when the hit the "left badges" div.
What changes do I need to make it get it to flow nicely? Does the div layout make sense or am I doing it wrong??
You can apply this CSS to the inner div:
#MiddleColumn {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.
If you are targeting IE8+, it might be better to have this instead:
#MiddleColumn {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.