Skip navigation
Currently Being Moderated

tables pulling apart when I resize my window?

May 1, 2013 6:18 AM

Hey guys, I'm new, please bare with me! I've searched the forums for the last few hours and haven't really found anything that'll help me so I figured I'd start a new topic:


The facts:


  1. sliced up my layout into simple image blocks, layed them out with a table
  2. inserted table in a fluid DIV


Looks fine full screen, but when I drag the edge of my browser window smaller and smaller (trying to emulate a mobile device's screen size), my tables seem to pull apart vertically but not horizontally.


page in question:


anyone have any insight as to keep them from seperating?

  • Currently Being Moderated
    May 1, 2013 9:54 AM   in reply to jasonalexandersleftnut

    This is what I see full screen


    Start by removing the apDiv1 and the table. After that modify the image to a managable size and use the 'alt' atribute so that you have some content on the page that can be read by screen readers and web spiders.

    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:24 AM   in reply to jasonalexandersleftnut

    This concept is never going to work.  Your images are grossly oversized & too huge for optimal viewing in average displays:

    320 - 480px = Mobile

    481-768px = Tablet portrait

    768-1024px = Tablet landscape

    1024-1232px = Desktops/Laptops.


    One image alone is 3600px wide which is about 3.5 times bigger than the average desktop and more than 10 times larger than a smartphone.


    Also Table layouts invariably fall apart in Fluid Grid Layouts.  It's better if you don't use them.


    • Scale images down to something reasonable in your graphics editor. Total image size should be less than 900px wide.  On the web, less is more.  Smaller file size = faster page load.


    • Build a responsive layout for Mobile first.  That's what everything else is based on.  Then arrange your tablet layout and finally your Desktop layout.
      See Screenshot.


    Below is a working example of this Layout.  If you resize your viewport, the divs move and images re-size.


    Hope this helps.



    Nancy O.

    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:32 AM   in reply to Nancy O.

    I looked at this much earlier and just saw a black screen. I then started scrolling about all over the place to find the content and then gave up. I wasn't really sure what positive advice to provide to be honest, other than a major re-think.

    Mark as:
  • Currently Being Moderated
    May 1, 2013 10:46 AM   in reply to osgood_

    Agreed. I had to agressively Zoom out in Firefox to make any sense of it.  Even then it didn't work. 



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points