The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

My div is totally messed up. please help

  • # July 12, 2013 at 12:08 am

    This i really puzzling.

    The code below has inline styling so you can see it clearly. My problem is as follows:
    I create a div 100% wide which on its own works well. It sits at the top of the page. I close the div with ending tag and no problem.

    However if I then create a table below that is wider than the display width of a tablet it affects the div above it. This does not happen on my computer. Just tablets and smart phones.

    you can look here to see for yourself.

    you can view the source code on the link above. It wont format properly here fr me :(

    Any help would be appreciated.



    # July 12, 2013 at 12:10 am

    It would be easier for us to help you if you put the code in a [Codepen]( “”)

    EDIT: I see you’ve posted a test page link now :)

    # July 12, 2013 at 12:15 am

    I’m also not seeing much of a difference on my phone as from the desktop. Could you be more specific on how the table is affecting the div above it?

    # July 12, 2013 at 12:18 am

    i just grabbed a screen shot of the test.

    look at the top gray div how it does not stretch the 100% width of the screen. If I remove the table it works or if I set the width of the table to say 800 it works.

    [screen shot]( “screenshot from tablet”)

    # July 12, 2013 at 12:23 am

    it’s probably because you have a pixel width set for the table and a 100% width for the div. The div is gonna go 100% of the width of the screen which is longer than the defined width of the table (1200px). If you set the table width to something like 70%, that might work for you.

    # July 12, 2013 at 12:24 am

    it’s shorter* than the defined width of the table….sorry about that

    # July 12, 2013 at 12:28 am

    wow such a simple solution using a %. Great and Thanks. But that wont let me fix a specific width :(

    But why would the above div be affected by a separate element? wouldnt the 100% stretch to however big the window is?

    # July 12, 2013 at 10:42 am

    That’s the tricky thing…the 100% div does go the width of the phone/device screen, but the table exceeds the screen. If you want to do a fixed width for the table, you can always do that and then use a media query for when it gets down to mobile sizes and switch it to percentages.

    Also, I’m not 100% sure since I haven’t tested, but if you maybe at the viewport meta tag, that might also help as well.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed