How to space Div elements?

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

Mahngiel · August 8, 2012

http://www.htmldog.com/guides/cssbeginner/margins/

floridaflatlander · 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

Christian F. · 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.

id · 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.

floridaflatlander · 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.

Sign In

How to space Div elements?

Recommended Posts

id

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

floridaflatlander

Link to comment

Share on other sites

Christian F.

Link to comment

Share on other sites

id

Link to comment

Share on other sites

floridaflatlander

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information