div elements and placement

dcanup

05-24-2007, 01:59 PM

I am designing my works website from the ground up and I am having some problems doing one of the things that I thought would be simple. I am post in my test code below so you can see what I am trying to do...in the code is also my two questions.

I will restate my questions here too though....
1) How can I get a my "block" (div element) to start at the very top left of the page?
2) Why does my height of my block not work when the width does?

<!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" />
<title>Untitled Page</title>
<style>
#test {
background-color: black;
color: white;
top: 0px;
left:0px;
margin: 0px;
height: 40%;
width: 50%;
}
</style>
</head>

<body>
<div id="test">
<p>How can I get this block so it is at the very top left of this page?</p>
<p>I set the height of the block at 40% of the page height but that does not work like I though it would even though the width part does work...So how do I get that part to work?</p></p>
</div>
</body>

</html>

Thanks to all that take the time to read this post...

abduraooft

05-24-2007, 02:15 PM

1) How can I get a my "block" (div element) to start at the very top left of the page?

use

body{
padding:0;
margin:0;
}

2) Why does my height of my block not work when the width does?

use this

body{
padding:0;
margin:0;

height:600px;
width:800px;

}

dcanup

05-24-2007, 05:46 PM

I should have though of the margin of the body... :rolleyes: ...thanks

So to get the %'s to work I have to have a set size for the page? And how bad does that effect the usability of the site?

_Aerospace_Eng_

05-24-2007, 08:37 PM

It doesn't. Thats the way to do things. To set a percentage height the parent element also needs to have a set height though the better thing to do would be to use min-height so try something like this
<!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" />
<title>Untitled Page</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#test {
background-color: black;
color: white;
min-height: 40%; /*this way the box will resize in height if more content is added or the font-size is resized*/
width: 50%;
}
#test p {
margin:0;
padding:10px;
}
/*hide from IE Mac\*/
* html #test { /*fakes min-height in IE6 and below*/
height:40%;
}
/*end hide*/
</style>
</head>
<body>
<div id="test">
<p>How can I get this block so it is at the very top left of this page?</p>
<p>I set the height of the block at 40% of the page height but that does not work like I though it would even though the width part does work...So how do I get that part to work?</p>
</div>
</body>
</html>

Arbitrator

05-25-2007, 12:18 AM

#test {
background-color: black;
color: white;
top: 0px;
left:0px;
margin: 0px;
height: 40%;
width: 50%;
}Just an FYI, but the top and left properties don’t do anything except for elements that are relatively, absolutely, or fixed positioned via the position property. You can also get rid of the px, if you want, for values of zero; the number zero doesn’t require a unit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">I would use HTML instead. See this recent post (http://www.codingforums.com/showpost.php?p=569539&postcount=9).

use

body{
padding:0;
margin:0;
}I would set all padding and margins to zero at the start of your primary style sheet from now on. This way, you don’t get hit by unexpected defaults, which may vary from browser to browser.

* { margin: 0; padding: 0; }

Of course, this means that you’ll have to explicitly restore desired margins, but you’ll have the advantage of knowing what they are (since you set them) and that the default is zero. As an example, you may want to restore the paragraph margins, as shown below.

* { margin: 0; padding: 0; }
p { margin: 1em; }