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.
JT# 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 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.
You must be logged in to reply to this topic.