May 11, 200917 yr Hi i am currently in the process of putting together my first web site. This is a website i have to produce for my final assignment, as i am still a beginner it is just basic xhtml/css using notepad. The problem i am having is the text in my main content is appearing out of the wrapper, i have a set width of 760px and have a width for the sidebar of 185px. Here is the code and style, it is probably something simple but i need some assistance please guys.. <style type="text/css">body { background-color: #AAB6CF; text-align: center; margin: 0; padding: 0; font-family: Helvetica, Verdana, Arial, sans-serif; } #wrapper { width: 760px; margin-left: auto; margin-right: auto; border-left: 2px solid #11198D; border-right: 2px solid #11198D; background-color: white; text-align: left; } #banner { background-color: #3E5991; border-bottom: 2px solid #11198D; } #banner h1 { color: white; font-size: 50px; text-align: center; padding: 0; margin-bottom: 8px; } #navigation ul { margin: 0; padding: 0; list-style-type: none; float: left; width: 175px; margin-left: 5px; } #navigation li { display: inline; } * html #navigation a { height: 1px; } #navigation a { color: #fff; font-size: 1em; text-decoration: none; border: 2px solid #11198D; padding: 7px 5px; display: block; background-color: #28809D; padding: 7px 5px 7px 10px; margin-top: 5px; } #navigation a:hover { font-weight: bold; background-color: #60A1B7; } #sidebar { width: 185px; border-right: 2px solid #11198D; } #content { margin-left: 190px; } </style> </head> <body> <div id="wrapper"> <div id="banner"> <h1>Tarleton Bowling Club</h1> </div> <div id="sidebar"> <div id="navigation"> <ul> <li><a href="homepage.htm">Home</a></li> <li><a href="functionroom.htm">Function Room</a></li> <li><a href="gamesloungebar.htm">Games/Lounge Bar</a></li> <li><a href="bowling.htm">Bowling</a></li> <li><a href="snooker.htm">Snooker</a></li> <li><a href="location.htm">Location</a></li> </ul> </div> </div> <div id="content"> <p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p> </div> <div id="footer"> </div> </div> </body> </html>
May 11, 200917 yr Try setting a width of 574px on #content: #content { margin-left: 190px; width: 574px; } 574 = 760 (#wrapper width) + 4px (borders) - 190px (#content's margin-left)
May 11, 200917 yr Hi Instead of ddddddddddd try putting actual words in, You should find it will stay within the content area. Pat
May 11, 200917 yr Author Hi Instead of ddddddddddd try putting actual words in, You should find it will stay within the content area. Pat Thanks for the replies guys, thanks pat that worked a treat!! thanks again. Colin.
May 11, 200917 yr Author Thanks for the replies guys, thanks pat that worked a treat!! thanks again. Colin. oh dear another problem now the text will not go to the top of the content area, it is just sitting in line with the bottom of the navigation links, any ideas??
May 11, 200917 yr oh dear another problem now the text will not go to the top of the content area, it is just sitting in line with the bottom of the navigation links, any ideas?? Have you changed the code from your first post, It works ok using that code. Pat
May 11, 200917 yr Author Have you changed the code from your first post, It works ok using that code. Pat no the code is exactly the same as before just changed the dddddddddd for normal wordflow?? Colin
May 11, 200917 yr Try changing the sidebar css to this #sidebar { width: 185px; border-right: 2px solid #11198D; float:left; } Pat
May 11, 200917 yr Author Try changing the sidebar css to this #sidebar { width: 185px; border-right: 2px solid #11198D; float:left; } Pat sorted thanks alot for your help pat!
Create an account or sign in to comment