typically adding a width to the element to be centered is needed, along with a margin of 0 and auto. Something like this would work:
.two-col {
width: 640px;
margin: 0 auto;
}
I set the width to 640px because that is the width of your iframe. I just don’t know if you want it on the .two-col div or where you want it!
Okay so I attempted to use that, but it just adds the code as text to the page. Yes, I am operating in the HTML tab and I’ve tried the code both within my existing code and independently.
Ah… you don’t want to add that code to the page itself. You want to add it to the style.css file. If you add it to the page itself, it’ll only work for just that page, not the whole site. And if you really want to add it to just that one page, you need to wrap the code in <style> </style> tags.
Are you familiar with stylesheets? If you are, you can go to “appearance->editor” and then in the right hand column select “stylesheet (style.css)” from the menu. Add this code there.
I am not familiar with stylesheets no. I did, however, find mine and attempt to update it
/* columns */
.one-col, .two-col, .three-col, .four-col {
display: inline;
float: left;
margin-left: 0px;
}
/* 1 column = 256px */
.one-col {width:256px;}
/* 2 column = 512px */
.two-col {width: 640px;
margin: 0 auto;
}
it now looks like that. I’ve been through all of the code on the style.css and this looks like the best place to put it. After a few updates and playing around with it, still no change to the webpage.
It’s a good start… but there are two other styles interfering… it looks like they way you are using the page, it won’t matter if we remove them. Change this block:
.one-col, .two-col, .three-col, .four-col {
display: inline;
float: left;
margin-left: 0px;
}
to this:
.one-col, .two-col, .three-col, .four-col {
margin-left: 0px;
}
And because of the funky background image you have, you may have to play with the width of .two-col to make it more centered. Maybe lower it to 540…?
Eureka! That centered it. There is other content throughout the cite that requires the
float: left;
coding. This section also seems to be the reason why it was off center in the first place. can I specify a certain code to a specific page or family of pages that would work around this?
P.s. Thanks for the patience and advice.
Ah ok… I see what the problem is now. I was looking to see what the difference was between the “about us” page, and this one here that you are trying to center. Why does “about us” look right?
You have some custom styles already specifying how these pages are centered. And I mean CUSTOM… by page name. Since you don’t know CSS, you must not have done these styles. So my suggestion to you is to forget what I wrote before, and do this in that file instead:
.pagename-building-exterior-rehab #content-wrapper {
margin: 70px 0 0 397px;
min-height: 660px;
}
You won’t find this code in the style.css file, but you will find:
.pagename-about-us #content-wrapper {
margin: 70px 0 0 397px;
min-height: 660px;
}
so just put it in after that code. You may have to play with the min-height value to prevent your footer from overwriting the text, or being too far away from it.
I don’t know who made these styles… they are “over engineered”… but again, you’re not familiar with css, so I’ll try to give you the easiest answer.
That did it! Awesome, this will improve the quality of my life tenfold. Thanks a lot for helping me out!
LOL… I’m glad I could improve the quality of your life and not just your website 🙂
Glad it worked out…
