We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Div layer leaving left gap on very simple code

cactuses37
cactuses37 asked
on
Medium Priority
358 Views
Last Modified: 2013-12-25
Hi, I am attaching some very simple html code. When I run that source I keep getting a gap to the left side of each div tag. I have demonstrated my issue below by showing a nested div and also a div alone in the body. I do not want a gap to the left.

Very simple! please help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#wrapper {
	width: 100%;
}
#header {
	background-color: #990000;
}
#alone {
	background-color:#3300FF
}
body {
	background-color: #996633;
}
-->
</style>
</head>
 
<body>
<div id="wrapper" align="center">
  <div id="header">Why is there a gap on top and left? (this is the nested div)</div>
</div>
<div id="alone">I dont want a brown gap on the left. (this div is not nested)</div>
 
</body>
</html>

Open in new window

Comment
Watch Question

Try changing your css to the following (it may seem simple and repetitive but I always set certain values for every css class):


<style type="text/css">
<!--
#wrapper {
        display: block;
        position: relative;
        padding: 0px;
        margin: 0px;
        width: 100%;
}
#header {
        display: block;
        position: relative;
        padding: 0px;
        margin: 0px;
        background-color: #990000;
}
#alone {
        display: block;
        position: relative;
        padding: 0px;
        margin: 0px;
        background-color:#3300FF
}
body {
        display: block;
        position: relative;
        padding: 0px;
        margin: 0px;
        background-color: #996633;
}
-->
</style>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.