html - Right sidebar shows up below content div element -
the content centered using margin:0 auto; , right side bar floated right. sidebar goes right, shows level below content box. if theres might have left out, please allow me know , upload.
note: sorry may have uploaded excess code, wanted upload sure.
edit: included header file div element height: 50px width: 100%; no problems either.
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <?php include('includes/header.php'); ?> <div id="wrapper"> <div id="sidebar"> <div id="menu1" class="menuitem"> <h3>navigation</h3> <ul> <li><a href="index.php">home</a></li> <li><a href="about.php">about us</a></li> <li><a href="#">links</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </div> <div id="menu2" class="menuitem"> <h3>box 2</h3> <ul> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> </ul> </div> <div id="menu3" class="menuitem"> <h3>box 3</h3> <ul> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> </ul> </div> </div> <div id="content"> <p>content</p> </div> <div id="sidebar"> <div id="menu1" class="menuitem"> <h3>navigation</h3> <ul> <li><a href="index.php">home</a></li> <li><a href="about.php">about us</a></li> <li><a href="#">links</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </div> <div id="menu2" class="menuitem"> <h3>box 2</h3> <ul> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> </ul> </div> <div id="menu3" class="menuitem"> <h3>box 3</h3> <ul> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> <li><a href="#">link here</a></li> </ul> </div> </div> </div> </body> </html> css:
#sidebar{ width: 200px; float: left; } .menuitem{ border-radius: 15px; background: gray; width: 200px; float: left; margin-bottom: 20px; } #content{ width: 400px; height: 500px; background-color: gray; margin:0 auto; } #sidebar2{ width: 200px; float: right; }
you should move both sidebars before content div. speaking, floating block allows blocks after placed side, while non-floating block causes blocks after go below it.
html css
No comments:
Post a Comment