lostprophetpunk Posted September 14, 2009 Share Posted September 14, 2009 I have come across a bit of a problem whilst re-coding my blog. The posts overflow the main contain, which has 'height: auto;', but there is only on element of the post that doesn't float within the container. How would I be able to display the posts within the 'main' div listed in the code below... HTML Code... <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Minihobbs - Blog</title> <link href="/blog/css/blogstyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id='wrapper'> <div id='header'></div> <div id='side'> </div> <div id='main'> <div id='title'>Minihobbs - Blog</title> <p class='title'>Lorem Ipsum<br /><span class='info'>Posted in <b>General</b><br />7:00pm</span><span class='comment'>Post A Comment - (0) Comments</span></p> <p class='date'>Sept<br />13</p> <div class='post'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices sapien enim. Nam hendrerit, dui a egestas luctus, lectus nunc viverra quam, vel mattis sem massa sed augue. Fusce et velit eget ipsum tincidunt facilisis posuere et nisl. Nullam id sem lorem. Mauris ipsum neque, luctus auctor facilisis a, porttitor ac lectus. Aenean sollicitudin mattis ipsum non pellentesque. Aenean tristique varius pretium. Cras dictum, metus eu euismod convallis, est ligula pharetra sem, accumsan pharetra mi urna eu orci. Pellentesque dolor magna, venenatis sollicitudin mollis in, dignissim in metus... </div> <p class='title'>Lorem Ipsum<br /><span class='info'>Posted in <b>General</b><br />7:00pm</span><span class='comment'>Post A Comment - (0) Comments</span></p> <p class='date'>Sept<br />13</p> <div class='post'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices sapien enim. Nam hendrerit, dui a egestas luctus, lectus nunc viverra quam, vel mattis sem massa sed augue. Fusce et velit eget ipsum tincidunt facilisis posuere et nisl. Nullam id sem lorem. Mauris ipsum neque, luctus auctor facilisis a, porttitor ac lectus. Aenean sollicitudin mattis ipsum non pellentesque. Aenean tristique varius pretium. Cras dictum, metus eu euismod convallis, est ligula pharetra sem, accumsan pharetra mi urna eu orci. Pellentesque dolor magna, venenatis sollicitudin mollis in, dignissim in metus... </div> <br /><br /> </div> </div> </body> </html>[/html] CSS Code... [code=CSS]body { background-image: url(/blog/images/bg.jpg); margin: 0; padding: 0; } #wrapper { width: 960px; margin: auto; } #header { width: 960px; height: 120px; } #side { width: 260px; height: 100px; background: #ffffff; float: right; } #main { width: 678px; background: #ffffff; border: 1px solid #ffffff; height: auto; float: left; } #title { width: 673px; height: 25px; background: #222222; padding-top: 5px; padding-left: 5px; border-bottom: 3px solid #d32424; font-family: georgia; font-size: 12pt; color: #ffffff; } p.date { width: 60px; height: 60px; float: left; margin-top: 20px; font-family: georgia; font-size: 18pt; color: #555555; text-align: center; margin-bottom: 0px; } p.title { width: 605px; font-family: georgia; font-size: 20pt; color: #000000; float: right; clear: both; margin-top: 16px; margin-bottom: 0px; } .info { width: 350px; font-family: verdana; font-size: 10pt; color: #888888; float: left; clear: both; margin-bottom: 0px; } .comment { width: 230px; font-family: verdana; font-size: 10pt; color: #888888; float: right; margin-bottom: 0px; } .post { width: 668px; padding: 5px; font-family: arial; font-size: 10pt; color: #000000; line-height: 15pt; clear: both; margin-bottom: 0px; } If anyone could help out that would be great. Link to comment https://forums.phpfreaks.com/topic/174189-floated-divs/ Share on other sites More sharing options...
saltedm8 Posted September 14, 2009 Share Posted September 14, 2009 is this it ?... not 100% sure what you were asking, but you had a couple of basic errors, like for example, you had tried to close a div with </title> unfortunately, that was the name of your class so you must have done it without thinking body { background-image: url(/blog/images/bg.jpg); margin: 0; padding: 0; } #wrapper { width: 960px; margin: auto; } #header { width: 960px; height: 120px; } #side { width: 260px; height: 100px; background: #ffffff; float: right; } #main { width: 678px; background: #ffffff; border: 1px solid #ffffff; height: auto; float: left; } #title { width: 673px; height: 25px; background: #222222; padding-top: 5px; padding-left: 5px; border-bottom: 3px solid #d32424; font-family: georgia; font-size: 12pt; color: #ffffff; } p.date { width: 60px; height: 60px; float: left; margin-top: 20px; font-family: georgia; font-size: 18pt; color: #555555; text-align: center; margin-bottom: 0px; } p.title { width: 605px; font-family: georgia; font-size: 20pt; color: #000000; float: right; clear: both; margin-top: 16px; margin-bottom: 0px; } .info { width: 350px; font-family: verdana; font-size: 10pt; color: #888888; float: left; clear: both; margin-bottom: 0px; } .comment { width: 230px; font-family: verdana; font-size: 10pt; color: #888888; float: right; margin-bottom: 0px; } .post { width: 668px; padding: 5px; font-family: arial; font-size: 10pt; color: #000000; line-height: 15pt; clear: both; margin-bottom: 0px; } <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Minihobbs - Blog</title> <link href="/blog/css/blogstyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div id='wrapper'> <div id='header'></div> <div id='side'> </div> <div id='main'> <div id='title'>Minihobbs - Blog</div> <p class='title'>Lorem Ipsum<br /><span class='info'>Posted in <b>General</b><br />7:00pm</span><span class='comment'>Post A Comment - (0) Comments</span></p> <p class='date'>Sept<br />13</p> <div class='post'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices sapien enim. Nam hendrerit, dui a egestas luctus, lectus nunc viverra quam, vel mattis sem massa sed augue. Fusce et velit eget ipsum tincidunt facilisis posuere et nisl. Nullam id sem lorem. Mauris ipsum neque, luctus auctor facilisis a, porttitor ac lectus. Aenean sollicitudin mattis ipsum non pellentesque. Aenean tristique varius pretium. Cras dictum, metus eu euismod convallis, est ligula pharetra sem, accumsan pharetra mi urna eu orci. Pellentesque dolor magna, venenatis sollicitudin mollis in, dignissim in metus... </div> <p class='title'>Lorem Ipsum<br /><span class='info'>Posted in <b>General</b><br />7:00pm</span><span class='comment'>Post A Comment - (0) Comments</span></p> <p class='date'>Sept<br />13</p> <div class='post'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices sapien enim. Nam hendrerit, dui a egestas luctus, lectus nunc viverra quam, vel mattis sem massa sed augue. Fusce et velit eget ipsum tincidunt facilisis posuere et nisl. Nullam id sem lorem. Mauris ipsum neque, luctus auctor facilisis a, porttitor ac lectus. Aenean sollicitudin mattis ipsum non pellentesque. Aenean tristique varius pretium. Cras dictum, metus eu euismod convallis, est ligula pharetra sem, accumsan pharetra mi urna eu orci. Pellentesque dolor magna, venenatis sollicitudin mollis in, dignissim in metus... </div> <br /><br /> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/174189-floated-divs/#findComment-918319 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.