Thread: Spacing help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Spacing help


    Can anyone help me get rid of the space between #content and #sidebar2?
    My HTML:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Austin's Blog</title>
    	<link href="default.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    	<div id="wrapper">
    		<div id="header">
    			<p>Header goes here.</p>
    		</div>
    		
    		<div id="nav">
    			<p>Navigation goes here.</p>
    		</div>
    		
    		<div id="sidebar">
    			<p>Sidebar goes here</p>
    		</div>
    		
    		<center><div id="content">
    			<p>Content goes here</p>
    		</div>
    		</center>
    		<div id="sidebar2">
    			<p>Sidebar goes here</p>
    		</div>
    		
    		<div id="footer">
    			<p>Footer goes here.</p>
    		</div>
    	</div>
    </body>
    My CSS:
    Code:
    body{
    	background-color: #EFEFEF;
    	margin: 0px;
    }
    #wrapper{
    	margin: auto;
    	width: 100%;
    	height: 100%;
    }
    #header{
    	background-color: #A3B6C7;
    	padding: 20px;
    }
    #sidebar{
    	background-color: #2AF6C2;
    	float: left;
    	padding: 20px;
    	width: 160px;
    	height: 700px;
    }
    #sidebar2{
    	background-color: #2AF6C2;
    	float: right;
    	padding: 20px; 
    	width: 160px;
    	height: 700px;
    }
    #content{
    	background-color:#778899;
    	float: left;
    	padding: 20px;
    	width: 1463px;
    	height: 700px;
    }
    #footer{
    	background-color: #A412F3;
    	clear: both;
    	padding: 20px;
    }
  2. #2
  3. No Profile Picture
    Online Strategist
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Location
    Moratuwa, Sri Lanka
    Posts
    111
    Rep Power
    24
    I think you need to provide bit more detail to clearly identify the issue. One possible reason could be you float:left in CSS and then trying to center it using HTML tags in the actual website.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    7
    Rep Power
    0
    For your content HTML, don't use <center></center> tags. In your CSS, use margin: 0px auto; to center the container.

    As far as the spacing issue. Your padding:20px usually gives a bit of whitespace. Use margin:20px; to give them some padding (At least that's what I have used.)
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    5
    Rep Power
    0
    As Minato suggest , don't use center tag . Use padding in pixels value.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Originally Posted by webmaster3388
    As Minato suggest , don't use center tag . Use padding in pixels value.
    Instead of padding, Minato got it spot on with using the margin to center the element.

    OP please remember that when using margin: auto; to center an element, you need to declare a width on that element BEFORE setting the margin value.

    Kind regards,

    NM.

IMN logo majestic logo spyfu logo threadwatch logo seochat tools logo