PDA

View Full Version : div positioning



nammem
Dec 19th, 2008, 01:59 PM
actually i had a body tag,inside is a div of 850px,i need that div should touch the top and bottom of the browser window.i had given margin top and bottom as 0px but not working.can u help

abduraooft
Dec 19th, 2008, 02:08 PM
Just add

*{
margin:0;
padding:0;
} into your CSS. (* is the universal selector and the above rule will nullify default margins and paddings from all elements.)

nammem
Dec 20th, 2008, 02:56 AM
thanks

Excavator
Dec 20th, 2008, 03:17 AM
Hello nammem,
That's easy to do using floats and margins, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #eeeeee;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 760px;
background: #fff;
margin: 50px auto;
overflow: auto;
}
#one {
width: 525px;
height: 160px;
float: left;
background: #F60;
}
#three {
width: 525px;
height: 325px;
float: left;
background: #960;
}
#two {
width: 235px;
height: 485px;
margin: 0 0 0 525px;
background: #0F0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="one">
525x160
</div>
<div id="three">
525x325
</div>
<div id="two">
235x485
</div>
<!--end wrap--></div>
</body>
</html>

Excavator
Dec 20th, 2008, 03:22 AM
Hello nammem,
Abs suggestion is a good one for clearing margin/padding and getting a div to but up to the top of the browser window.

It's a whole different matter to get that div to "touch the bottom of the browser window" !!

Have a look at a full height solution here. (http://nopeople.com/CSS/full-height-layout/index.html)