Hello,I am having trouble with how my Div displays and I can't seem to find the answer myself, so I am coming for help!Question: Once you view the page, the right hand div is far to big and it throws off the rest of the web page, my question is how to force it to be smaller, I would like a full answer becaseu I have tryed many commands and none seem to work.You can look at the code below, but I would recommend that you download the zip file:Web Project.zipThe code is very long at this time because I have the css and the html together, I will change this later.Also I think I am still using some deprecated commands, I am not sure, if you spot any please tell me. I have not gone through all my code fully, so I might have missed some things.
<html><head><title></title><style type="text/css">/* Padding order: top,right,bottom,left. *//* margin order: top,right,bottom,left. */div.header {padding: 10% 30% 10% 30%;border-color: #000000;text-align: center;clear: both;background-position: center top;background-repeat: repeat-y;}div.navigation {padding: 10% 2% 10% 2%;border-color: #000000;text-align: left;clear: left;background-position: center top;background-repeat: repeat-y;line-height: 220%;}div.content {padding: 10% 10% 10% 10%;border-color: #000000;text-align: right;clear: none;background-position: center top;background-repeat: repeat-y;}div.thumbnails {padding: 10% 2% 10% 2%;margin: 0% 1% 10% 1%;border-color: #000000;background-position: center top;background-repeat: repeat-y;line-height: 1%;}div.footer {padding: 10% 30% 10% 30%;border-color: #000000;clear: both;background-position: center top;background-repeat: repeat-y;}div{background-image:url(Foreground.jpg);background-repeat:no-repeat;margin: 2% 2% 2% 2%;border-width: 2px;border-style:solid;background-position: center top;background-repeat: repeat-y;}table.layout{text-align: center;}body{background-image:url(background.jpg);background-repeat: no-repeat;background-attachment: fixed;}img.movie{float: left;}</style></head><body><table class="layout" align="center" width="90%"> <tr> <td colspan="3"> <div class="header"> Header </div> </td> </tr> <tr> <td> <div class="navigation"> <p> <h4>Main Sections</h4> <hr /> Home<br /> Reviews<br /> Links<br /> About<br /> <hr /> <h4>Movie Sections</h4> <hr /> Comedy<br /> Horror<br /> Fantasy<br /> Family<br /> Action<br /> Lorem ipsum<br /> Lorem ipsum<br /> Lorem ipsum<br /> <hr /> <h4>Links</h4> <hr /> Lorem ipsum<br /> Lorem ipsum<br /> Lorem ipsum<br /> </p> </div> </td> <td> <div class="content"> <img class="movie" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="35%" /> <p> <h3>Lorem ipsum</h3><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sit amet mauris et diam lacinia pellentesque. In blandit, lacus quis pharetra suscipit, ligula orci imperdiet metus, vulputate varius enim odio eu velit. Suspendisse feugiat quam at orci. Curabitur augue tortor, rutrum eget, scelerisque vitae, vestibulum non, erat. Integer accumsan mattis justo. Donec volutpat vulputate nisl. In hac habitasse platea dictumst. Sed consequat quam. Curabitur nisl lacus, feugiat in, consequat vel, rhoncus sed, dui. Nullam porta, odio id iaculis mollis, tellus quam nonummy ipsum, sit amet scelerisque enim nibh vel mauris. Integer eros. </p> <p> Morbi libero neque, auctor quis, eleifend id, adipiscing porttitor, mauris. Fusce sagittis iaculis dui. Vestibulum blandit iaculis dolor. Aliquam orci. Aenean lobortis, dui ac consectetuer malesuada, arcu orci feugiat velit, eget fermentum nisi dui vitae mi. Etiam gravida rutrum ante. Aliquam mollis leo quis leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris volutpat, lacus ut vulputate auctor, mauris risus dapibus dolor, vitae ullamcorper mi turpis a erat. In malesuada dui at ligula. Praesent dapibus, odio sit amet viverra commodo, mauris turpis viverra purus, nec tempor ipsum nunc eleifend tellus. In nibh. Etiam laoreet, odio vel convallis blandit, lorem sem tincidunt diam, a tincidunt diam diam in metus. Integer malesuada, ipsum eget varius commodo, tellus ligula scelerisque ligula, nec viverra eros urna ac lorem. Proin nec lorem id sapien volutpat semper. </p> </div> </td> <td> <div class="thumbnails"> <p> <h3>Quick Links</h3> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> <hr /> <h5>Movie Title</h5> <img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" /> <br /> </p> </div> </tr> <tr> <td colspan="3"> <div class="footer"> Footer </div> </td> </tr></table></body></html>
