user2192551
user2192551

Reputation: 1

Why do my HTML tables go below each other when the browser window is repositioned?

I am making a website where I am aligning tables for my content. One table is used for a navigation bar and others are used for other content. Anyways, I have set these tables as float:left;and at a position:relative;.

The problem is, whenever I reposition the browser window all of the tables travel underneath the far left table. How can I fix this problem? I want it so the tables will not travel underneath each other.

For some odd reason this application will not allow me to post my code. I can post it, but it will not format the entire thing correctly.

Upvotes: 0

Views: 529

Answers (2)

Mike
Mike

Reputation: 1544

Watson is correct, including the recommendation by Diodeus not to use tables for formatting. One way you can remedy the situation you're running into, though, is to wrap all your tables in a containing element (say, a div) and then set a width or min-width css parameter that is equal to or slightly greater than the width needed for all your floated tables to fall into their proper location. What will happen then, is when the window is resized smaller than needed, you'll get a horizontal scroll bar but the positioning of the elements will remain intact.

Upvotes: 1

dezman
dezman

Reputation: 19358

This will happen if the width of the tables that are floated is greater than the width of their parent (the available space). Watch for padding, margin, border adding extra width. And follow Diodeus's advice, don't use tables for layout.

Upvotes: 1

Related Questions