[HTML/CSS] Centering a table issue

Hi,

Essentially I have a table:



However I am having trouble with aligning the table in the center of the page. .

This is the code I am using pretty much:

http://jsfiddle.net/ndhqM/456/

If anyone would be able to explain how to center it that would be awesome. I don't particularly want to set specific pixels as this will only work on specific monitors.

Any help is appreciated!

 

I'm only on a phone right now so I can't test this.

Instead of margin: 0 auto; add:

Margin-left: 50%;
Left: 70%;

I know this would work if your boxes where a specific size ex. 50px width but it might work this way.

Good luck

 

I believe I put the above in the correct position and the result can be seen below:

http://puu.sh/87f34.png

Seems to have shifted it to the right >_< Unless I put the code in the incorrect place :embar:

 

The margin-left will make it shift to the right then you have to position it left more.

I'm not sure but you might have to make the content box relatively positioned or try making your left: 70% to left: -70%

Wish I could do some trial and error on my computer right now .

 

When changing the left to any value it did not seem to have any impact on the position of the table other than when I first input the code shifting it completely to the right :huh:

E.g.:



The column still remained on the right even with negative percentages. I could be wrong but I believe the red font indicates a syntax error?

I do apologize if some if this is worded in incorrect terminology.

 

Some browsers are case sensitive so you may need to make the "Left" left as well as the Margin-left to margin-left.

If you haven't yet try making the position relative (position: relative and if -70% does not work with left you can use right: 70%;

 

I made all of the corrections and tried adjusting the percentages appropriately but still not luck. >_< I'll remember the case sensitive for future thanks.

 

Ok so I got the chance to access my dads laptop.

Here is what I have come up with:

You can make your CSS like this:
div {
/* inset shadow for visual aid only: allow to easily see the div boundaries */
box-shadow: 0 0 1px black inset;
}

#contentBox {
width: 70%;
margin: 0 auto;
}

#contentBox .column {
float: left;
margin: 0 auto;
width: 50%;
}

I kept your content box the same. I think this is what you wanted to do (Hope it is!). I think you wanted your 2 .column's to be 50% of it's parent div, content box, which was 70% of the page. To do this you needed to make the .column's 50% because they are taking 50% of the parent div, not the web page.

Sorry if that was confusing, hope this is what you meant.

 

Yes! This is perfect! Thank you for the help and the explanation Whilst it means the columns are a little wider it works perfectly! Thank you again!

 

No problem, I'm happy I realized the problem wasn't margins but dimensions, haha!