- This topic is empty.
-
AuthorPosts
-
July 12, 2013 at 12:08 am #46337jtorralParticipant
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 #142415theacefesMemberIt 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 #142416jkinney768ParticipantI’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 #142420jtorralParticipanti 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 #142423jkinney768Participantit’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 #142424jkinney768Participantit’s shorter* than the defined width of the table….sorry about that
July 12, 2013 at 12:28 am #142425jtorralParticipantwow 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 #142493jkinney768ParticipantThat’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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.