Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post

    divs - no space between?

    I want to do 2 sections as separate divs one on top of the other, but I don't want any space between them. Can this be accomplished or will I have to make them in the same div?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes, it can.

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    ok... how? Whenever I create new divs it puts a space between them.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Have you tried adding:

    Code:
    div {
       margin:0px;
       padding:0px;
       border:0px;
       }
    to the top of your CSS?
    matt | design | blog

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    or better yet

    Code:
    * {
    padding:0px;
    margin:0px;
    }

  • #6
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    That doesn't seem to do anything

    Here's what I'm trying to create:


    I was thinking that I should use 2 divs: 1 for the top box and then 1 right under it for the "notes" box. Ideas?

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well give us the look to what its doing, and some code.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    div is an empty element. It, like span, has no semantic meaning whatsoever — and the only difference between div and span is that div is a block level element while span is an inline one. Because they are completely empty elements they aren't given any dimension, margin, or padding by the browser until you set it:

    Code:
    	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    		"http://www.w3.org/TR/html4/strict.dtd">
    	<html>
    		<head>
    			<title>divs are empty elements</title>
    			<meta http-equiv="content-type" content="text/html; charset=utf-8">
    			<style type="text/css">
    				div {
    					width: 100px;
    					height: 100px;
    					border: solid 1px #000; }
    			</style>
    		</head>
    		<body>
    			<div></div>
    			<div></div>
    			<div></div>
    		</body>
    	</html>
    …see? If you're getting spaces in between divs it means something inside the divs are pushing them apart, or you've applied styles to your divs and you need to alter them.

    As far as how to make your little picture a webpage, start like you would any other (well-built) HTML-based website in the universe — mark up the HTML as semantically as you can, use extra markup as "hooks" if necessary, and then style with CSS. Without any HTML to style, CSS is useless.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,620
    Thanks
    6
    Thanked 1,001 Times in 974 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •