0

I made a draft website to learn html, but I noticed that on smaller screens, margin-right: auto doesn't work. Same with the <center> tag. I would give the code, but it's pretty big, so I'll just explain what I did:

I put everything in a table and used colspan for more tidyness. Everything is in a very big div.
The div has width 65%, margin-left:auto and margin-right:auto.

It works perfectly on my pc, but not on smaller screen ones, like laptops. It just appears in the far right, like margin-right is not even there. If I remove margin-left, it goes to the left too much. I also don't want to measure it in pixels, because it varies from resolution to resolution (right?).

How can I make it work?

Nathan Davis
  • 5,636
  • 27
  • 39
Fat Uncle D
  • 19
  • 6
  • 2
    Just a note: please avoid using `
    ` tags to center-align content. This is how it was done 10 year ago, and as you begin to learn more of HTML and CSS, it is important that you don't just learn the old practices and techniques. [Question about why the `
    ` tag is deprecated](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html). TL;DR: HTML should not define how a page looks.
     – Marko K Aug 23 '15 at 22:50
  • 1
    The same goes for using `table`s for layout and pictures as texts. Yep, I feel like I’m in 2005 now… – Sebastian Simon Aug 23 '15 at 22:57
  • 1
    Didn't notice the use of a `table`. Thanks, @Xufox. HTML tables are meant to be used for tabular data - like you would use in Microsoft Excel. For layout in 2015, you should **really** look into [Flexboxes](http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/). They can make your sites much more fluid and responsive. – Marko K Aug 23 '15 at 23:00
  • 1
    The centering problem originates from the “home” images. You’ve set them all to `width="250"`. Therefore the accumulated width of four columns plus the spacing is over 1000px. If you define the width of your table (or the wrapper around it) to 65%, that means it’s 65% of the website’s width (roughly, in this case). These 65% are going to be smaller than 1000px, though. Therefore the table doesn’t fit in order to be centered. – Sebastian Simon Aug 23 '15 at 23:03

1 Answers1

0

You should just remove all these wrappers around table and it'll be good.

You shouldn't also use center tags. center is deprecated in HTML 5 and since you use CSS it's unnecessary. margin: 0 auto is enough.

Using table to build a page isn't good idea too. You definitely need to read about HTML5 and how to use it to build semantic page layout. Here is good article about that.

sajran
  • 317
  • 4
  • 15