The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS My div is totally messed up. please help

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #46337

    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.




    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 :)


    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?


    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”)


    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.


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


    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?


    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)
  • The forum ‘CSS’ is closed to new topics and replies.