id Posted August 8, 2012 Share Posted August 8, 2012 Hey everyone... I have a problem. I do not know how to space the the divs! I want to add a space inbetween the div stuff and the div members. Also i want to add a space from the sidebar and the footer just like their is a space from the container and footer. html <!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" /> <link href="css/main.css" type="text/css" rel="stylesheet" /> <title>EmporaTech</title> </head> <body> <div id='admin_bar'> (Admin | Login | Logout) </div> <div id='header'> <h1>Home Page</h1> </div> <div id='primary_nav'> <ul> <li><a href='index.php'>Home Page</a></li> <li><a href='#'>Forums</a></li> <li><a href='#'>Member's Page</a></li> <li><a href='#'>Account</a></li> <li><a href='#'>Extras</a></li> </ul> </div> <div id='content'> <h1><center>Welcome Back , Lamar!</center></h1> <div id='container'> <div class='stuff'> <div id='todo_list'> <h1><center>To-do List</center></h1> <ul> <li>Create Outline for Webpage (css)</li> <li>Create Membership Script (Register, Login, Logout)</li> <li>Create a Profile script (User can edit account, view others account, remove account)</li> <li>Create member's application (Display a list full of members, Allow different account (Admin, Moderator, etc..), and more to come! )</li> </ul> </div> <div id='comments'> <h1><center>Comments</center></h1> <p>Outline is finished! Now to just do the memberships!</p> </div> </div> <div id='members'> <h1>Membership Application</h1> <ol> <li>Create login system</li> <li>Create logout system</li> <li>Create Registration</li> <li>Edit the website, and perform a check for a session to alter the links in the admin bar.</li> <li>Create a member's page which displays the user information</li> </ol> </div> </div> <!-- END CONTAINER TAG!--> <div id='sidebar'> </div> <!-- END THE SIDEBAR TAG!--> <div id='footer'> <p>Copyright Empora Tech 2012</p> </div> </div><!-- END THE CONTENT TAG! --> </body> </html> css @charset "utf-8"; /* Copyright EmporaTech */ /************************* For whole page! Create new css file for future applications! ***********************/ /* Notes * Colorwares: Green - #6C9 , Gray - #999 & #666! */ /* Main Content */ body { padding: 0px; margin: 0px; color: black; background-image:url(images/background.gif); background-size: 100%; } /* Admin Bar*/ #admin_bar { background-color:#CCC; text-align: center; height: 25px; border-top: solid thin #333; border-bottom: solid black thin; } /* Header */ #header { padding: 10px; margin: 0px; height: 105px; background-color: #999; border-bottom: #333 solid thin; text-align: center; box-shadow: inset 0px -10px 20px 0px #666; } /* Primary Navigation */ #primary_nav { padding: 0px; margin: 0px; border-bottom: thin solid #333; } #primary_nav ul { margin: 0px; padding: 0px; list-style-type: none; overflow: hidden; background-color: #999; } #primary_nav li { display: block; } #primary_nav a { float: left; width: auto; padding: 10px 10px; color: #333; border-right: thin solid #333; } #primary_nav a:hover { background-color: #F90; } /* Body Section */ #content { padding:10px; margin-left: 125px; width: 80%; float: left; border: #CCC thin solid; background-color: white; -webkit-box-shadow: 0px 0px 20px -10px #000; box-shadow: 0px 0px 20px -10px #000; } #container { width: 79%; float: left; } .stuff { margin: 0px; padding: 0px; clear: both; } #todo_list { float: left; width: 50%; height: 250px; border: #999 solid thin; border-radius: 15px 15px 15px 15px; } #comments { float: right; width: 49%; height: 250px; border: #999 solid thin; border-radius: 15px 15px 15px 15px; } #members { padding: 10px; margin: 0px; clear: both; height: auto; border: thin #999 solid; border-radius: 15px 15px 15px 15px; } #members h1 { text-align: center; } /* Side Bar */ #sidebar { width: 20%; min-height: 500px ; float: right; border:black thin solid; } /* Footer */ #footer { clear: both; border-top: #333 solid thin; text-align: center; color: #6C9; } Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/ Share on other sites More sharing options...
Mahngiel Posted August 8, 2012 Share Posted August 8, 2012 http://www.htmldog.com/guides/cssbeginner/margins/ Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/#findComment-1367717 Share on other sites More sharing options...
floridaflatlander Posted August 8, 2012 Share Posted August 8, 2012 If your going to do stuff like this get and use firefoxes firebug, firebug color codes the divs, margins and padding on the web page so you can see the styles, it will tell you what the css file name is, the name of the style, what line the style is coming from and the inheritance if any. I think chrome does the same thing. But try adding a bottom margin to stuff Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/#findComment-1367745 Share on other sites More sharing options...
Christian F. Posted August 8, 2012 Share Posted August 8, 2012 Opera's Firefly has an excellent styles and layout overview as well, so you can use any browser you'd like (except IE, afaik) to help you sort out this issue. Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/#findComment-1367766 Share on other sites More sharing options...
id Posted August 8, 2012 Author Share Posted August 8, 2012 I found out my issue. I didnt know that i had to put a margin-bottom on both of my divs (comments, and todo list), i just thought that you had to put it on the div stuff... thanks. Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/#findComment-1367781 Share on other sites More sharing options...
floridaflatlander Posted August 8, 2012 Share Posted August 8, 2012 I found out my issue. I didnt know that i had to put a margin-bottom on both of my divs (comments, and todo list), i just thought that you had to put it on the div stuff... thanks. Then something is wrong. If comments and the todo divs are inside the stuff div all you need to do is put a margin on the stuff div. I strongly suggest you do as ChristianF and I suggested and use firebug, chrome or opera so you can see what is happening. Your stuff div is not floated and it contains floated divs, this means it collapses and has no height. /*your code now*/ .stuff { no float } #todo_list { float: left; } #comments { float: right; } all you have to do is float the stuff div too and put a margin on it. Quote Link to comment https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/#findComment-1367812 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.