Centering conundrum

HTML & CSS
1

Hello I am a newbie at XHTML and CSS. I have just completed “Build Your Own Web Site The Right Way”. The tutorial is excellent. However, in building my own, first, web site, I have run into a problem that has stumped me. Given the new very wide monitors now in use, up to date web sites have all the information centered so that it is not spread all over the screen. I am trying to get my site centered on the screen. Using the HTML command <center> is fine for all vertically in-line data. But for the life of me, I cannot get a column of text to align itself next to a picture and have both centered on the page. CSS absolute positioning seems to be in conflict with HTML centering. The reason I am doing this is to have my site pleasantly viewable on any monitor, new or old. Is there anyone who can help me with this conundrum?

2

Hi rjpabich, a hearty welcome to SitePoint! This is a very active forum, and you can be assured that all your needs will be met.

Centering content as you describe is very easy. Just a few point, though. Use of the center element is badly out of date, so erase if from your memory. Secondly, absolute positioning is rarely a good idea for site layout—especially the main sections of a page. Only use it rarely, for special little items here and there.

So… the first thing you should do is wrap the contents of your page in a div, say with an id of “wrapper”.

Then, in your style sheet, give that wrapper a width (be it fixed or fluid) and set left and right margins to auto. That will center the page, like so:


#wrapper {
  width:960px;
  margin: 0 auto;
}

As for aligning text next to a picture, you can best do that with floats. How exactly to do that depends on the specifics of how you want the page to be laid out.

So, please provide us with a link to your page (if live) or the code you are using. You can post a link by removing the http bit and leaving a space for the dots, or just writing ‘dot’ each time.

If you are posting your code, please wrap it in code tags (by highlighting it and clicking the code (#) button.

If any or all of the above makes no sense whatever, don’t despair. Just keep asking questions!

3

Hi, welcome to Sitepoint :wave:

I think I understand you, you want an image and then text floating along side it? And you want all that centered?

Just do something like this
<div>
<img>
<p>text</p>
</div>

Give the <div> a width and overflow:hidden; and margin:0 auto (the margin will center it)

Then float both the <img> and the <p>, both with a respectable width :).

That should help. Though, if we get a link we could provide you with exact code :slight_smile: