Member Avatar for bryanhiehle

Hello,
So i need some help. i have currently been working on a website for a competition and i ran into a problem. I am using <div> tags and calling the id from the css. i have seperate id's classes and basic tag set up in CSS. the only problem is that i have ran into a current problem of having only the header div and left div tag appearing right, but not the body div tag. the body div tag sits on the bottom. I am using Microsoft Expression Web2 and tried moving them, but it came with a fixed attribute. i know that in the past the fixed attribute does not work with firefox and causes a mess if not set correctly. Would anyone know any way to help me out?

Here is my code:

/* Enter basic CSS for XHTML PAGE */
body {
	background: #FFFFFF;
	margin: 0px
	0px
	0px
	0px;
	}
	
			/* Enter ID for XHTML PAGE */
#DC-Header {
	background-color: #FF5B60;
	font-family: "Times New Roman", Times, serif;
	font-size: large;
	font-style: normal;
	letter-spacing: 3px;
	text-align: center; 
	height: 120px; 
}
#DC-Header-Img {
	text-align: left;
	width: auto;
	height: 120px;
	border: 0px;
	border-color: #FFFFFF;
	vertical-align: middle   
}
#DC-Left-Bar {
			/* Size and General attributes of the Left Bar */
	width: 150px;
	height:700px;
	position:relative ;
	left: -5px;  
	background-color: #ABF2F8; 
	padding-left: 10px; 
			/* Border Attributes */
	border-right: thin;
	border-right-color: #FF5050;
	border-right-style: solid ;
	border-right-width: thin ;  
}
#DC-Body {
	background-color: #FFFFFF ;
	position:relative ;
	width:700px;
	height:700px;
}

			/* Enter Classes for XHTML PAGE */
.Header-Font {
	text-align: center;
	font-family: "Times New Roman", Times, serif ;
	font-weight: lighter ;
	font-variant: normal;
	color: #000000;
	font-size: x-small ;
	position:relative;
	display: block;
}
.Left-Bar-Links {
					/* Font attributes */
	vertical-align: top ;
	text-align: left ;
	font: menu ;
	font-family: "Times New Roman", Times, serif ;
	color: #000000;
	font-size:medium ;
	font-weight: normal ;

}
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Washington D.C. Buissness Profesionals of America 2010</title>
<!-- Insert of CSS Document -->
<link rel="stylesheet" href="StyleSheets/styles.css" type="text/css" />
		<!-- End of CSS Document -->
</head>

<body>


		<!-- Insert Header -->
	<div id="DC-Header">
		<div id="DC-Header-Img" ><img src="tizagSugar.jpg" alt="Washington D.C. Banner" />
<font class="Header-Font">Washington D.C. BPA 2010</font>

		</div>
	</div>

		<!-- End of Header -->
		<!-- Begin of Left Bar -->
	<div id="DC-Left-Bar">
	<p class="Left-Bar-Links" ><a href="http://www.whitehouse.gov">Washington D.C.</a>	
	</p>
	</div>
		<!-- End of Left Bar -->
		<!-- Beging of main body -->
	<div id="DC-Body" style="left: 158px; top: -698px" >
	
	sadsad
	</div>
		<!--End of main Body -->
	

</body>

</html>

Any help will be greatful. I am currently competing in the Buisness Profesionals of america competition in high school. so this is still a learning process.

  • 2 Contributors
  • 4 Replies
  • 255 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

A quick diagnosis and a simple, robust fix.

The problem comes from mixing positioned offsets with normal document flow. Moving the main column with relative/top (and a negative top value) only shifts it visually while leaving its original space in the flow, which creates the large gap and the “body at the bottom” effect. was right to flag default margins on block elements — the paragraph inside the left bar often adds visible vertical space under the header. The inline positioning on the main content is brittle and will break across browsers and screen sizes.

A cleaner layout keeps elements in flow: float the left column and let the main column sit beside it with a left margin equal to the sidebar width (plus any gap). Remove inline left/top offsets and avoid fixed heights where possible; use min-height instead. The header should contain or clear the floats so it stays above both columns. Also reset browser defaults (zero page margin/padding) and remove default paragraph margins in the sidebar as suggested.

Example CSS pattern (replace existing inline offsets and position rules):

html, body { margin: 0; padding: 0; }

/* header contains floats */
#DC-Header { overflow: hidden; }

/* left sidebar */
#DC-Left-Bar {
  float: left;
  width: 150px;
  background: #ABF2F8;
  box-sizing: border-box;
}

/* main content beside sidebar */
#DC-Body {
  margin-left: 170px; /* sidebar width + gap */
  min-height: 400px;
  background: #fff;
}

Troubleshooting notes: avoid deprecated tags (the old <font> tag), remove inline styles on #DC-Body, and test with the browser inspector (temporary outlines or borders help reveal spacing). Clearing or containing floats and removing default paragraph margins will remove the header/left-bar gap noted by and let the layout behave predictably across browsers.

Recommended Answers

All 4 Replies

Member Avatar for ko ko

You can use absolute position property to move where you want. The relative position left the extra white space after it positioned. The absolute position doesn't left the white space and it can move exactly where you want. If it's parent has the position property of relative, it will calculate and position from it's parent. If not, it will calculate and position from the browser.

CSS:
#parent {
position: relative; width: 100%; height: 400px }
#child {
position: absolute; top: 50%; left: 50%; width: 200px; height: 200px }

HTML:
<div id="parent">
    <div id="child">It relative to its parent element and absolutely position from 50% of top and left.</div>
</div>

Sorry about for my English skill. I hope you will be ok.

Member Avatar for bryanhiehle

Thanks. I kind of understand what your saying, but i could never find a real explination. Like the only white space i get is in the DC-Header bottom and the DC-Left-Bar top. and when i tried putting the DC-Body in, it went to the very bottom of the pge

Member Avatar for ko ko

There is p element in your DC-Left-Bar, The p element has margin. So, you can break the margin property.

#DC-Left-Bar p {
margin: 0; }

Good Luck..

Member Avatar for ko ko

Never forget some block elements have their own margin and padding. Also headings and list-items have the default margin and padding. The margin and padding properties are depending on the browser types. So, you must always set the margin and padding values to the same result for all browsers. Sorry for my English skills.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.