How can I get these tables to line up? -Closed

Code Feedback
1

First, please ignore the design, I am far from finished.

I can not get the 3 tables in the About section to line up on the same line. Basically I want the tables to line up side by side on the same line with a nice amount of spacing in between and the outer edges of the first and last table should be well away from the edge of the screen.

The last table is showing like it is on the next line. Somebody please help

http://codepen.io/kmroncancio/full/bwXwyV/

2

Change the css to float:left on your lefttable, centertable and righttable classes

3

Thanks @joelpeyton that worked.

How frustrating when things are so simple :grin:

edit: now it’s not working correctly on smaller screens :frowning:

4

This doesn’t address your question, so I apologise for giving unsolicited advice…but…

You shouldn’t use tables for layout. You can Google around for the reasoning behind that, but here is one simple series of reasons not to: http://phrogz.net/css/WhyTablesAreBadForLayout.html

Since you are using Bootstrap, you may like to investigate panels instead. Or you can just manage your own layout with Bootstrap’s grid system and just use simple divs.

Again - sorry to be the guy with the unsolicited advice, but avoiding tables will make your life easier once you start thinking about responsive design.

2 Likes
5

@JacksonBates advice is ALWAYS welcome over here!

Working with these tables have been frustrating and now they aren’t showing correctly on smaller screens. So I’ll definitely read up on panels and grid system. Neither have been mentioned so far so I didn’t know about them.

Thanks!

6

The original link has been deleted, I ended up starting my portfolio over from scratch. Just as much for the practice as it was for the fact that there was something wrong that I could not figure out. New and finished portfolio is in the portfolio review category now.

Thanks