This post is related to my last one, only I've decided to follow Jon's Em and Elastic Layouts with CSS article. Everything appears to be going along a bit smoothly, especially the "content" aka "div id: wrap", it's showing up perfectly on both of my computers/devices. But I've encountered another problem.
Everything is showing perfectly except for the Navigation table. So.. yeah, I really don't understand how the content is staying where it is. Can someone explain to me how everything seems to work except for the Navigation? This resolution stuff is bumming me out and seems to be my biggest problem. Or I'm just not understanding how it works. D:
p img{ width:7.5em; height:7.5em; margin:0 1.5em 1.5em 0; float:left; }
</style> </head>
<div id="nav"><p>testing</p><br> <table class="navtable"> <tr> <td><a href="default.asp" target="_blank">This is a link</a></td> <td><a href="default.asp" target="_blank">This is a link</a></td> </tr> <tr> <td><a href="default.asp" target="_blank">This is a link</a></td> <td><a href="default.asp" target="_blank">This is a link</a></td> </tr> </table></div>
<div id="wrap"> <div class="dots"></div>
<div id="content"> <h1>Layout Testing— Layout Elasticity</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p></div>
Its because your nav is not with in the wrap, and the margin left is pushing it from the left of the browser window, not the left of the wrap div. So when you view this on a larger resolution screen, you will get the overlapping effect because the wrap is horizontally aligned to the center of the browser window, and the nav is not within it. The margin left keeps the nav in its current position.
If you put the nav inside the wrap float the content to the left, and the nav to the right, it should start to work. Some more fiddling around may be required. I recommend reviewing Chris's video tutorials on floats.
I tried just as you suggested and it didn't seem to work. I even tried what Chris had shown in his tutorial and it does move the navigation on the right, using this following code inside the "wrap":
I added a blue colour just to see how far it moved and it's too far in the corner of the content, leaving no space and no gray border . But I didn't edited the actual CSS... The float didn't work for the CSS.
Remove the position: absolute, and the large margin from the nav, and add float: right. Now, this will stop the overlapping, but sizing and margins will have to be fixed to make sure everything fits the way you want it.
I have screen caps this time:
My layout on the laptop.
My layout on the desktop. See how the Nav table is not meeting the other end?
Everything is showing perfectly except for the Navigation table. So.. yeah, I really don't understand how the content is staying where it is. Can someone explain to me how everything seems to work except for the Navigation? This resolution stuff is bumming me out and seems to be my biggest problem. Or I'm just not understanding how it works. D:
Here is the website link.
And the code:
If you put the nav inside the wrap float the content to the left, and the nav to the right, it should start to work. Some more fiddling around may be required. I recommend reviewing Chris's video tutorials on floats.
I hope I helped you!
I tried just as you suggested and it didn't seem to work. I even tried what Chris had shown in his tutorial and it does move the navigation on the right, using this following code inside the "wrap":
I added a blue colour just to see how far it moved and it's too far in the corner of the content, leaving no space and no gray border . But I didn't edited the actual CSS... The float didn't work for the CSS.
Thank you so much! :D