Forums

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
    Posts
  • #46337
    jtorral
    Participant

    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

    #142415
    theacefes
    Member

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

    #142416
    jkinney768
    Participant

    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?

    #142420
    jtorral
    Participant

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

    #142423
    jkinney768
    Participant

    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.

    #142424
    jkinney768
    Participant

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

    #142425
    jtorral
    Participant

    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?

    #142493
    jkinney768
    Participant

    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.