Grow your CSS skills. Land your dream job.

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. http://www.zeissimages.com/test.html

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

    Any help would be appreciated.

    Thanks,

    JT

    # July 12, 2013 at 12:10 am

    It would be easier for us to help you if you put the code in a [Codepen](http://codepen.io/pen/ “”)

    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](http://nikonimages.com/gallery/4/U4I1373602767.SEQ.0.jpg “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.

*May or may not contain any actual "CSS" or "Tricks".