RossM Posted October 12, 2009 Share Posted October 12, 2009 Hi all, looking for some help on this issue.Basically i have a layout. Pictured below.Layout imageAs you can see, the text goes underneath the navigation, which i don't want it to... And was wondering whether there was a way to stop it doing this?Here is the code... <html><head><title>My CSS Website</title><meta name="Keywords" content="html/css"/><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {background-color: #FFFFFF;background-image: url('background.gif');background-repeat:repeat-x;font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;}div#wrapper {width: 80%;background-color:#FFFFFF;margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;padding: 0px;border: thin solid #000000;}div#header {padding: 0px;margin: 0px;text-align: center;border-bottom: thin solid #000000}div#nav {width: 25%;padding: 1px;margin-bottom: 0px;margin-top: -1px;margin-left: -0x;float: left;border-right: thin solid #000000;border-left:;border-bottom: thin solid #000000;}div#main {margin-left: 10%;margin-top: -10px;padding: 5px;}div#footer {padding: 15px;margin: 0px;border-bottom: thin solid #000000;}a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: underline;color: #000000;}a:active {text-decoration: none;}</style></head><body><div id="wrapper"><div id="header"><h1>Ross's Homepage</h1></div><div id="nav"><h2>Navigation</h2>Home<br>Contact<br>About<br></div><div id="main"></div><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus at tellus interdum euismod. Pellentesque id dui enim, sit amet rhoncus justo. Ut dignissim, nibh et faucibus consequat, ante risus feugiat tellus, at sodales eros leo non tortor. Etiam interdum dictum lobortis. Nullam elementum mauris vitae magna malesuada euismod. Donec vehicula eros vitae metus consequat sed tristique velit egestas. Donec faucibus scelerisque mi, sed molestie ipsum dictum et. Sed facilisis suscipit neque, id volutpat erat volutpat ut. Donec faucibus diam et quam dictum lobortis. Duis lacus purus, faucibus a mollis sit amet, congue at eros. Morbi mauris nunc, blandit faucibus tincidunt et, volutpat non erat.Pellentesque at magna dignissim nulla varius consectetur eu quis neque. Nunc quam risus, pretium at iaculis ac, congue non arcu. Nunc quis magna et felis congue dapibus nec vitae magna. Fusce in nulla eget lacus accumsan vulputate sed sed tellus. Phasellus at sagittis mauris. Praesent vitae dolor sem. Aenean luctus venenatis ligula, vitae interdum tellus scelerisque ut. Vestibulum luctus nibh in ipsum dignissim aliquam. Nulla scelerisque, odio eu ornare consectetur, ligula mauris vulputate lacus, in faucibus dui eros non nisi. Morbi cursus, odio non aliquet porttitor, lectus felis eleifend tellus, et pulvinar eros nisi sed dui. Praesent vulputate mollis tortor et sodales. Sed elementum nulla ac tellus feugiat laoreet. Pellentesque lacus lectus, aliquet at luctus eget, molestie et purus. Phasellus fringilla cursus gravida. Etiam ultricies pellentesque eros at varius.Ut gravida, justo eu ultricies ornare, magna nunc adipiscing felis, id congue dui nunc a purus. Mauris sagittis sem eu libero blandit et commodo massa fringilla. Vestibulum eget sapien libero, sit amet feugiat sem. Integer dolor massa, ultricies vitae ornare eu, scelerisque sed diam. Curabitur euismod felis vitae ante placerat ultrices. Ut eros nibh, blandit eu auctor commodo, volutpat quis risus. Nam adipiscing consectetur gravida. Curabitur convallis quam at elit ultricies faucibus. Donec consequat ligula nec neque adipiscing vitae varius lacus lacinia. Maecenas sit amet nisl ut velit sollicitudin mattis vel a ligula. Proin semper porta urna, tincidunt dignissim dui ornare vel. Maecenas est augue, placerat gravida pulvinar porta, hendrerit in turpis. Vivamus iaculis vehicula eleifend. Nunc ut ullamcorper odio. </h3></body></html> Link to comment Share on other sites More sharing options...
chibineku Posted October 12, 2009 Share Posted October 12, 2009 If you give #nav a fixed or % width and float it left (as it is at the moment), and float #main right, it should all stay in proper alignment. You can either specify a width for #main or leave it to fill the available space by not setting it. Obviously the widths of both, if explicitly set, need to add up to the width of #wrapper or 100%. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 12, 2009 Share Posted October 12, 2009 you do realize, that div main is empty? it does not surround the main text, and you have a missing end div tag.there's more: margin-left: -0x; -> margin-left: 0;border-left:; -> border-left:none;anyway, once you have fixed above, make margin-left of #main the same, or bit more (to give a space between, text and nav) than the width of #nav.Then best idea, would be to give a fixed px width to the #nav, and give #main, #nav width+10 for margin-left. Link to comment Share on other sites More sharing options...
RossM Posted October 12, 2009 Author Share Posted October 12, 2009 you do realize, that div main is empty? it does not surround the main text, and you have a missing end div tag.there's more: margin-left: -0x; -> margin-left: 0;border-left:; -> border-left:none;anyway, once you have fixed above, make margin-left of #main the same, or bit more (to give a space between, text and nav) than the width of #nav.Then best idea, would be to give a fixed px width to the #nav, and give #main, #nav width+10 for margin-left.Hi, thanks for the advice. Could you sure give me an example of the code please as i'm not entirely sure what you mean... Link to comment Share on other sites More sharing options...
dsonesuk Posted October 12, 2009 Share Posted October 12, 2009 <!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">body {background-color: #FFFFFF;background-image: url('background.gif');background-repeat:repeat-x;font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;}div#wrapper {width: 80%;background-color:#FFFFFF;margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;padding: 0px;border: thin solid #000000;}div#header {padding: 0px;margin: 0px;text-align: center;border-bottom: thin solid #000000}div#nav {width: 200px;padding: 1px;margin-bottom: 0px;margin-top: -1px;margin-left: 0;float: left;border-right: thin solid #000000;border-left:none;border-bottom: thin solid #000000;}div#main {margin-left: 210px;margin-top: -10px;padding: 5px;}div#footer {padding: 15px;margin: 0px;border-bottom: thin solid #000000;}a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: underline;color: #000000;}a:active {text-decoration: none;}</style></head><body><div id="wrapper"><div id="header"><h1>Ross's Homepage</h1></div><div id="nav"><h2>Navigation</h2>Home<br>Contact<br>About<br></div><div id="main"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus at tellus interdum euismod. Pellentesque id dui enim, sit amet rhoncus justo. Ut dignissim, nibh et faucibus consequat, ante risus feugiat tellus, at sodales eros leo non tortor. Etiam interdum dictum lobortis. Nullam elementum mauris vitae magna malesuada euismod. Donec vehicula eros vitae metus consequat sed tristique velit egestas. Donec faucibus scelerisque mi, sed molestie ipsum dictum et. Sed facilisis suscipit neque, id volutpat erat volutpat ut. Donec faucibus diam et quam dictum lobortis. Duis lacus purus, faucibus a mollis sit amet, congue at eros. Morbi mauris nunc, blandit faucibus tincidunt et, volutpat non erat.Pellentesque at magna dignissim nulla varius consectetur eu quis neque. Nunc quam risus, pretium at iaculis ac, congue non arcu. Nunc quis magna et felis congue dapibus nec vitae magna. Fusce in nulla eget lacus accumsan vulputate sed sed tellus. Phasellus at sagittis mauris. Praesent vitae dolor sem. Aenean luctus venenatis ligula, vitae interdum tellus scelerisque ut. Vestibulum luctus nibh in ipsum dignissim aliquam. Nulla scelerisque, odio eu ornare consectetur, ligula mauris vulputate lacus, in faucibus dui eros non nisi. Morbi cursus, odio non aliquet porttitor, lectus felis eleifend tellus, et pulvinar eros nisi sed dui. Praesent vulputate mollis tortor et sodales. Sed elementum nulla ac tellus feugiat laoreet. Pellentesque lacus lectus, aliquet at luctus eget, molestie et purus. Phasellus fringilla cursus gravida. Etiam ultricies pellentesque eros at varius.Ut gravida, justo eu ultricies ornare, magna nunc adipiscing felis, id congue dui nunc a purus. Mauris sagittis sem eu libero blandit et commodo massa fringilla. Vestibulum eget sapien libero, sit amet feugiat sem. Integer dolor massa, ultricies vitae ornare eu, scelerisque sed diam. Curabitur euismod felis vitae ante placerat ultrices. Ut eros nibh, blandit eu auctor commodo, volutpat quis risus. Nam adipiscing consectetur gravida. Curabitur convallis quam at elit ultricies faucibus. Donec consequat ligula nec neque adipiscing vitae varius lacus lacinia. Maecenas sit amet nisl ut velit sollicitudin mattis vel a ligula. Proin semper porta urna, tincidunt dignissim dui ornare vel. Maecenas est augue, placerat gravida pulvinar porta, hendrerit in turpis. Vivamus iaculis vehicula eleifend. Nunc ut ullamcorper odio.</h3></div></div></body></html> Link to comment Share on other sites More sharing options...
RossM Posted October 12, 2009 Author Share Posted October 12, 2009 Thanks alot for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.