papillonstudios Posted April 22, 2010 Share Posted April 22, 2010 ok im trying to code my layout where i have a navbar with content next to it. these 2 divs are inside a container div that has a background color of white. with the background of the site as a dark grey. the problem im running into is that if i use float the 2 divs arent inside the the container. i ahve also tried the position method but this also didnt work. whats another way i can have the same effect float has on my site. heres all the code(the basic design) index page <!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=UTF-8" /> <title>Website Name</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="header"> <img src="images/header.jpg" alt="header" /> </div> <div class="navbar"> <ol> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ol> </div> <div class="content"> <h3>Heading</h3> <p>Paragraph</p> </div> </div> </body> </html> css body { background-color:#333; color:#000; } .container { background-color:#FFF; margin-left:auto; margin-right:auto; width:910px; height:auto; padding-bottom:25px; padding-top:10px; padding-left:5px; position:relative; padding-right:5px; } .header { width:auto; background-color:#333; padding:5px 5px 5px 5px; } .navbar { position:absolute; left:0px; margin-left:0px; width:200px; } .content { position:absolute; right:0px; } Quote Link to comment Share on other sites More sharing options...
n000bie Posted April 22, 2010 Share Posted April 22, 2010 Use width with float .navbar { width:200px; float:left; margin-left:0px; background-color:blue; } .content { width:710px; float:left; background-color:red; } hope this works... Quote Link to comment Share on other sites More sharing options...
papillonstudios Posted April 22, 2010 Author Share Posted April 22, 2010 that doesnt work man. that pulls the divs out of the container div Quote Link to comment Share on other sites More sharing options...
n000bie Posted April 22, 2010 Share Posted April 22, 2010 You have to adjust the width for navbar and content. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.