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; } Link to comment https://forums.phpfreaks.com/topic/199338-aligning-divs/ 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... Link to comment https://forums.phpfreaks.com/topic/199338-aligning-divs/#findComment-1046232 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 Link to comment https://forums.phpfreaks.com/topic/199338-aligning-divs/#findComment-1046377 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. Link to comment https://forums.phpfreaks.com/topic/199338-aligning-divs/#findComment-1046389 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.