Jump to content

Recommended Posts

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;
}

 

capturevfb.png

Link to comment
https://forums.phpfreaks.com/topic/266796-how-to-space-div-elements/
Share on other sites

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

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.