Jump to content

Vertical alignment in html5


MuscovyX
 Share

Recommended Posts

I've started using html5, but I'm having an issue with aligning things. I've always used tables, and I realize that this is probably wrong. In html5, I can't set tables heights to be 100%, which messes up my layout. How should I actually be aligning things?Thanks.

Link to comment
Share on other sites

I've started using html5, but I'm having an issue with aligning things. I've always used tables, and I realize that this is probably wrong. In html5, I can't set tables heights to be 100%, which messes up my layout. How should I actually be aligning things?Thanks.
Use css to align things
Link to comment
Share on other sites

An element's height can be set to 100% if its ancestor elements have a defined height. That includes setting the <html> and <body> elements height to 100% as well. Unlike with table cells, this won't vertically center the content within the element.There are certain ways to vertically center content, but I don't know exactly what you want your layout to look like so I don't know which one would be suitable.

Link to comment
Share on other sites

. I've always used tables, and I realize that this is probably wrong. Thanks.
Yes, using tables for alignment has always been wrong. The purpose of a table is to present tabular data like a chart or a spreadsheet kind of look. However, in the beginning, it was the only way to achieve "fancy" layouts. Now CSS allows us to position things.As Ingolme said, vertical align is tricky but horizontal is fairly simple.Here is my formula for design:1-draw on paper with squares and rectangles2-turn it into words I want a small box on the left (for this content) to the right of that I want a box (for that content) that expands to the rest of the width of the screen . . . etc3-read up on the box model to be sure you understand the difference between margin and padding4-start setting up your page with DIVs using background colour to differentiate5-use as little content as possible until you can align things where they need to be...otherwise you get lost6-when you close a DIV, add a comment to say which one you just closed. you will easily lose track if you have many nested DIV7-add major parts of content8-remove colour as applicable and see if you got it right9-come back here along the way if you run into a stumbling block.10-in between steps 4 and 9, validate your code several times
Link to comment
Share on other sites

  • 2 weeks later...
I've started using html5, but I'm having an issue with aligning things. I've always used tables, and I realize that this is probably wrong. In html5, I can't set tables heights to be 100%, which messes up my layout. How should I actually be aligning things?Thanks.
Using tables to align things has been wrong since XHTML, before HTML5, using CSS. Are you familiar with using CSS and XHTML? Perhaps you are skipping a step trying to go into HTML5.
Link to comment
Share on other sites

agreed. you should be able to do all your positioning of HTML elements (doesn't matter which kind, (X)/5) using floats, paddings, and margins with CSS.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...