DannyGolden Posted November 4, 2011 Share Posted November 4, 2011 Hi, everyone I just got accepted into the forums and hopefully I'll be as active as possible. I am just starting out with CSS and HTML. I'm still only 17 so try to bear with me here. I am just messing around, making something for my friend and I. We are big movie fans and such so I decided to get a list going and wanted to practice HTML at the same time. Now, my question is why does this happen? (the image is far too large to leave it in the post sorry )http://i42.tinypic.com/25ionrl.jpg The two lists are each in a div with an ID of content_left and content_right respectively. The area with the placeholder text is just the content div. I placed the two lists inside of the content div but it obviously doesn't want to do what I think should happen. Any help is appreciated :/ Here is my code: <body> <div id="header"> </div> <div id="content"> <!-- All Content Goes here --> <p>Placeholder text/p> <p>Placeholder text/p> <div id="content_left"> <h2>Daniel's List</h2> <div class="movie_list"> <table> <thead> <th>Movie</th> <th>Plus or Minus</th> </thead> <tbody> <tr> <td><img src="images\TheDescent.jpg" alt="The Descent" </td> <td>Minus</td> </tr> <tr> <td><img src="images\Frozen.jpg" alt="Frozen"</td> <td>Minus</td> </tr> </tbody> </table> </div> <!--End DivID Content_Left --> </div> <div id="content_right"> <h2>Jessica's List</h2> <div class="movie_list"> Friends With Benefits<br /> House of Wax<br /> The Devil Inside<br /> </div> </div> <!--End DivID Content --> </div> <div id="footer"> </div></body></html> CSS: #content {margin-left: 10%;margin-right: 10%;width: 75%;background-color: #f5f5f5;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding: 20px;-moz-box-shadow: 10px 1px 20px #888;-webkit-box-shadow: 10px 1px 20px #888;box-shadow: 10px 1px 20px #888;}#content_left {height: 10px;width: 40%;float: left;}#content_right {width: 40%;float: right;}.movie_list {border: 1px solid #4c4c4c;border-top: 3px solid #4c4c4c;margin: 0px;padding: 20px;} Link to comment Share on other sites More sharing options...
Don E Posted November 4, 2011 Share Posted November 4, 2011 Looks like you're missing closings tags for the paragraph tag </p>. Would also be a good idea to add a doctype, opening html and head tags. <!doctype html><html><head><title>title here</title></head><body></body></html> If you're trying to make the content div wrap around everything, try adding this to #content: overflow: hidden; Also noticed your content div is at 75%, where content_left and content_right are both at 40%, makes 80%. Looks like you're going to have to make your content div bigger to accommodate both divs. Link to comment Share on other sites More sharing options...
Ingolme Posted November 4, 2011 Share Posted November 4, 2011 It's always important to validate your HTML. The lack of a <!DOCTYPE> element will cause the browser to use a different, and incorrect, rendering engine. Also noticed your content div is at 75%, where content_left and content_right are both at 40%, makes 80%. Looks like you're going to have to make your content div bigger to accommodate both divs.That's not right, The 40% is actually 40% of 75%, because heights are relative to the immediate parent. This means that, realative to the whole document, they're really 30% and will fit inside the container. Link to comment Share on other sites More sharing options...
Don E Posted November 4, 2011 Share Posted November 4, 2011 Ah yes! One can follow your posts and become a web development genius! (Of course the same goes for many others on this board!) Link to comment Share on other sites More sharing options...
DannyGolden Posted November 4, 2011 Author Share Posted November 4, 2011 Looks like you're missing closings tags for the paragraph tag </p>. Would also be a good idea to add a doctype, opening html and head tags. <!doctype html><html><head><title>title here</title></head><body></body></html> If you're trying to make the content div wrap around everything, try adding this to #content: overflow: hidden; Also noticed your content div is at 75%, where content_left and content_right are both at 40%, makes 80%. Looks like you're going to have to make your content div bigger to accommodate both divs. This isn't really what I want but thank you. I just would like #content to stretch with #content_left and #content_right, but apparently I'm not understanding div's correctly. Is there another way to separate sections of a webpage without taking them out of the direct flow? Link to comment Share on other sites More sharing options...
DannyGolden Posted November 4, 2011 Author Share Posted November 4, 2011 It's always important to validate your HTML. The lack of a <!DOCTYPE> element will cause the browser to use a different, and incorrect, rendering engine. That's not right, The 40% is actually 40% of 75%, because heights are relative to the immediate parent. This means that, realative to the whole document, they're really 30% and will fit inside the container. I do have the DOCTYPE at the top I just wanted to show you my body for times sake haha. Link to comment Share on other sites More sharing options...
Ingolme Posted November 4, 2011 Share Posted November 4, 2011 Are you sure you added "overflow: hidden" to the CSS of the container. It will stretch with the columns it contains if you do that. Link to comment Share on other sites More sharing options...
DannyGolden Posted November 5, 2011 Author Share Posted November 5, 2011 Are you sure you added "overflow: hidden" to the CSS of the container. It will stretch with the columns it contains if you do that. I did and it does wrap around #content_left and #content_right but it hides the content past the specified height of #content.Here is a picture:http://i44.tinypic.com/maw4js.jpg I'm just going to show you all of my code... HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="Stylesheet" type="text/css" href="style.css" /><!-- Must Watch Movies Author: Danny Golden Created: 11/01/11 Filename: index.htm Supporting Files: Images\[all]--> <title>Must Watch Movies</title></head><body> <div id="header"> </div> <div id="content"> <!-- All Content Goes here --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies dictum dapibus. In gravida turpis eget metus consectetur eu tincidunt ligula sollicitudin. Vivamus odio odio, faucibus ac bibendum sed, aliquam vel tortor. Nunc ut magna nulla, ut vestibulum erat. Ut varius sagittis leo sit amet vestibulum. Curabitur a ante nisl, eget interdum augue. Nullam id mauris urna. Suspendisse rutrum nibh sed orci malesuada molestie. Etiam porttitor, justo non ullamcorper rhoncus, lacus velit luctus purus, at pellentesque mauris dui cursus nisl.</p> <p>Duis magna sem, fringilla in fermentum eu, lobortis non erat. Aliquam ut tortor magna. Integer ut metus id metus fermentum pellentesque at et ligula. Pellentesque sem sapien, congue ac lacinia a, tempor in justo. Ut sollicitudin hendrerit suscipit. Fusce lacinia nunc nec libero dictum ullamcorper id quis sem. Nam porta, leo sed ullamcorper pharetra, mi purus congue purus, bibendum sollicitudin felis dui nec odio. Cras tempus dui quis metus mattis commodo. Morbi fermentum sem pharetra mi adipiscing vehicula.</p> <div id="content_left"> <h2>Daniel's List</h2> <div class="movie_list"> <table> <thead> <th>Movie</th> <th>Plus or Minus</th> </thead> <tbody> <tr> <td><img src="images\thedescent.jpg" alt="The Descent" /></td> <td>Minus</td> </tr> <tr> <td><img src="images\frozen.jpg" alt="Frozen" /></td> <td>Minus</td> </tr> </tbody> </table> </div> <!--End DivID Content_Left --> </div> <div id="content_right"> <h2>Jessica's List</h2> <div class="movie_list"> Friends With Benefits<br /> House of Wax<br /> The Devil Inside<br /> </div> </div> <!--End DivID Content --> </div> <div id="footer"> </div></body></html> CSS: /* Must Watch Movies Author: Danny Golden Created: 11/01/11 Filename: style.css */body {font-family: Helvetica, Arial, Sans-Serif;color: #1c1c1c;background-color: #1ccdc7;}h2 {border-right: 30px solid transparent;border-bottom: 30px solid #4c4c4c;color: #cd5a1c;display: inline-block;font-weight: bold;height: 0px;line-height: 50px;margin: 0px;padding: 10px;text-shadow: 0 1px 0 #1c1c1c;}#content {margin-left: 10%;margin-right: 10%;min-height: 800px;width: 75%;background-color: #f5f5f5;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding: 20px;-moz-box-shadow: 10px 1px 20px #888;-webkit-box-shadow: 10px 1px 20px #888;box-shadow: 10px 1px 20px #888;overflow: hidden;}#content_left {height: 10px;width: 40%;float: left;}#content_right {width: 40%;float: right;}.movie_list {border: 1px solid #4c4c4c;border-top: 3px solid #4c4c4c;margin: 0px;padding: 20px;}.movie_list img {height: 300px;width: 200px;}.movie_list th {border-bottom: 3px inset #4c4c4c;font-size: 20px;}.movie_list td {padding: 5px;} Link to comment Share on other sites More sharing options...
Ingolme Posted November 5, 2011 Share Posted November 5, 2011 You shouldn't specify a height. If you are specifying a height, then you shouldn't set the overflow property. It doesn't make logical sense to have it both ways. If you want it to completely surround the other boxes, it's going to have to extend beyond any fixed height.If you give it a fixed height, it's not going to surround the other boxes because you told it not to take up as much space as it needed. Link to comment Share on other sites More sharing options...
Don E Posted November 5, 2011 Share Posted November 5, 2011 Off topic for a second... Danny... you give The Descent a minus?! Ah man.. it was pretty good! Link to comment Share on other sites More sharing options...
DannyGolden Posted November 5, 2011 Author Share Posted November 5, 2011 You shouldn't specify a height. If you are specifying a height, then you shouldn't set the overflow property. It doesn't make logical sense to have it both ways. If you want it to completely surround the other boxes, it's going to have to extend beyond any fixed height.If you give it a fixed height, it's not going to surround the other boxes because you told it not to take up as much space as it needed. Blah! Oh wow, thank you! It fixed it. I don't know why I specified I height. I don't remember putting it there. Off topic for a second... Danny... you give The Descent a minus?! Ah man.. it was pretty good! Jess and I hated the ending, but I heard there is a part 2 so maybe it will change my opinion. (: Link to comment Share on other sites More sharing options...
Don E Posted November 5, 2011 Share Posted November 5, 2011 Trust me... you'll like part 2. Watch it and let me know what you think. Link to comment Share on other sites More sharing options...
DannyGolden Posted November 5, 2011 Author Share Posted November 5, 2011 Okay, I will. (: Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.