View Full Version : CSS Centering problem, Any Suggestions?

12-19-2005, 07:15 AM
Hi guys, Im new here so if I post this wrongly please let me know.

Im trying to create a personal photo website and I cant seem to find a way to center everything correctly. So if anyone has any input, please let me know.

Now let me clarify my situation.

Currently my HTML is the following:

<div id="wrap2">
<img class="bodypic" src="image.gif">
<div id="test"></div>

The first image is how I want everything to look, the objects next to each other horizontally. I can accomplish this by using the following code.

body {
font-size: 12px;
font-family: arial, helvetica, sans-serif, sans;
background: #000;
text-align: center;
margin: 0px;
padding: 0px;

#wrap2 {
width: 841px;
padding: 10px;
margin: 0px auto;
text-align: center;

#test {
background: #F00;
width: 41px;
height: 307px;
float: left;

.bodypic {
padding: 6px;
background: #E9E9E9;
border: 1px solid #D1D1D1;
margin: 0px 0px 0px 0px;
float: left;

The problem with this css code is that it won't center everything.

I tried to take out the Float: left attribute, but the two objects line up vertically.

Another factor that needs to be considered is that my images are not always the same size. (if they were, I could just define a width to Wrap2 that would fit the two objects exactly.

I hope this clarifies everything. Let me know if you need more info or have any suggestions.

12-19-2005, 07:28 AM
Would it be possible for you to post a link to your site? Is the attachment image.gif the one you used in your html? Can you draw a rough picture of what you want or is image.gif what you are trying to achieve?

12-19-2005, 05:21 PM
My site is currently not live yet. The image gif is an actual screenshot of what my site looks like, i just used solid colors so I wont consfuse anyone with images.

This only works because I use float left on the div (called test) and the image. Then I center it by wraping it with another div. The problem with this is that depending on the size of the div and the image, it will not always stay centered.

Ill try to upload the site tonight.

12-19-2005, 06:01 PM
You'll need to clear the float on the image. Try removing the 'float: left;' from the test div, and replacing it with 'clear: both;'

Let me know if that helps.

12-20-2005, 04:56 AM
thanks for the suggestion, it didnt work. By doing what you suggested, the two images are vertically aligned.

I uploaded a sample of what I want my page to look like, the only problem is that it does not center


Hopefully someone has a way to fix it.

12-20-2005, 05:18 PM
If anyone else has a suggestion, please feel free to chime in =D

12-20-2005, 10:54 PM
You have used the same id more than once, you can't do that, if you need to use the same styles then use a class. As for your centering, this image

and this image

Only add up to 739px wide not 900px wide. Seems like you have a problem with your widths. Redo the calculations and double check the widths you are using. When you float elements you can no longer use text-align:center; on them. You can make them display:inline; and use text-align:center; the problem with this though is the smaller image will line up at the bottom of the bigger image.

12-21-2005, 03:47 AM
Whoops, I totally forgot that I was using Id on them. I added the last few examples with the intent to use different styles on them but decided to go with just one style. wont happen again =D

I understand that the two images add up to only 739px. The problem is that test1.gif will not always be of the same size. So this means that if it is any larger, the URL.gif will move below the test1.gif. Is there anyway for me to keep them centered and allow myself to use variable test1.gif sized pictures? (I guess this is basically my question from the beggining). The main goal is not to have the smaller gif move below the larger gif when the larger gif varies its width, all while keeping the two things centered on the page.

12-21-2005, 07:14 AM
Read this (http://www.cssplay.co.uk/menus/centered.html), it discusses a menu that uses float left but the concept is the same for what you are trying to do.

12-21-2005, 05:06 PM
Thats perfect thanks. I just discovered that site a few days ago and its awsome. Thanks so much, its exactly what I was looking for.