chrisciscoioio Posted October 23, 2006 Share Posted October 23, 2006 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> Link to comment Share on other sites More sharing options...
aspnetguy Posted October 23, 2006 Share Posted October 23, 2006 you simple use width, if this is not working there are other issues at work. Link to comment Share on other sites More sharing options...
chrisciscoioio Posted October 23, 2006 Author Share Posted October 23, 2006 There are other issues at work, I can't seem to find them Link to comment Share on other sites More sharing options...
justsomeguy Posted October 23, 2006 Share Posted October 23, 2006 Try specifying height: 100% on the classes for your divs. If you're wondering about deprecated tags, run your code through a validator. Link to comment Share on other sites More sharing options...
chrisciscoioio Posted October 25, 2006 Author Share Posted October 25, 2006 Umm... I am not having a problem with height just how wide it is. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 26, 2006 Share Posted October 26, 2006 Oh, you only said that it was "too big", I took that to mean height. If the width is more then what you are telling it to be, then there is some content, like an image, inside the div that is stretching it. Link to comment Share on other sites More sharing options...
aspnetguy Posted October 26, 2006 Share Posted October 26, 2006 remember padding and margin contribute to width as well.if you have a div witht he width 500 and a margin of 10 thent he real width is 520 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now