|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: Floated div holding over other div
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 2
|
|
| Author |
|
spatial_fluidity
Advanced Member UK Joined: Aug 27, 2006 Post Count: 294 Status: Offline |
Ive started work on a draft of a simple blog im creating, i have a main div which holds all content , within that i have a header div, a nav div and a main div, the main div is floated left but is overlapping the nav div, ive tried clearing floats ect but it still stays there.] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body { font-family: "Trebuchet MS", Arial; font-size: 12px; font-style: normal; font-weight: bold; color: #666666; background-color: #33CCFF; background-image: url(bkg.jpg); background-repeat: repeat-y; width: 100%; height: 800px; text-align: center; } #holder { background-color: #ECE9D8; background-image: url(bck.jpg); background-repeat: repeat; height: 80%; width: 80%; margin: 0 auto; border: medium solid #D4CBAE; } #header { border-bottom-width: medium; border-bottom-style: solid; border-bottom-color: #D6CBAF; height: 20%; } #nav { height: 30px; border: medium solid #D4CBAE; list-style-type: none; } #main { width: 75%; float: left; } --> </style> </head> <body> <div id="holder"> <div id="header"></div> <div id="nav"></div> <div id="main"></div> </div> </body> </html> ---------------------------------------- /* noComment */ =D |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Hi, I'm assuming you'll want the NAV on the right. First, set your html nav div below the main div. INMHO, it is best that way - Content before Navigation. <div id="holder"> <div id="header">Header Div Blah</div> <div id="main">Main Div blah</div> <div id="nav">NAV Div blah</div> </div> I added text so I can see the layout in action. Next, I added borders to reveal more visually (remove them after testing). Then, I added a float right & width to the Nav div: #nav { width: 25%; float: right; height: 30px; border: medium solid #D4CBAE; list-style-type: none; border:1px solid green; } #main { width: 75%; float: left; border:1px solid red; } If you test this you will see a slight overlap because of the box model... So, now you decrease the width of each floated div slightly to give some "cushion" between them: #nav { width: 23.5%; float: right; height: 30px; border: medium solid #D4CBAE; list-style-type: none; border:1px solid green; } #main { width: 74.5%; float: left; border:1px solid red; } Adjust accordingly... Sprinkle lightly and stir.  Why do you have heights in the holder and nav divs? Well, I think the holder height is so there is much empty bottom space between the "page" and the browser bottom. But the Nav without height will adjust according to the content. Just add a little padding to it so the content doesn't hit top or bottom (optional). ------------------------------------------------------------------ John D. Beatrice  MaineWebworks "If you don't know where you are going, any road will get you there." - Lewis Carroll. "The art of life lies in a constant readjustment to our surroundings." - Okakura Kakuzo ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks ---------------------------------------- [Edit 2 times, last edit by shelfimage at Sep 8, 2006 7:51:49 PM] |
||
|
|
|
|
Current timezone is GMT May 21, 2013 2:34:22 PM |
