variable top margin hieght depending on window size [Archive]

Click to See Complete Forum and Search --> : variable top margin hieght depending on window size

lomokev

11-16-2006, 02:18 PM

how would have a variable hight margin so that it shrinks if the browser becomes to small to display content below it.

body {
font-family: Arial, Helvetica, sans-serif;
margin-left: 10px;
margin-top: 10px; /* change */
margin-right: 0px;
margin-bottom: 0px;
font-size: 11px;
line-height: 15px;
}
div#main_con {
margin-right: auto;
margin-left: auto;
position: relative;
width: 700px;
height: 672px;
background-color:#FFFF00;
}

if you look at my example page you better see what i am trying to do

http://www.sgoralnick.com/csstest.php

KDLA

11-16-2006, 03:10 PM

margin-top: 5%;

or whatever percentage you want to use. It will be based upon the browser window's height.

KDLA

lomokev

11-17-2006, 11:22 AM

thanks for that. but that only sort of works. i added margin-top: 10%; in to the body css and the top margin dose get somller and bigger but only when i resize the width of the browser! its the same for ie, firefox PC and firefox on the mac

body {
margin-top: 10%;
margin-left: 10px;
margin-right: 10px;
}

http://www.sgoralnick.com/csstest.php

interpolerater

02-16-2011, 10:39 AM

Old post, but in case people are interested I have a solution. Margin-top uses a percentage based on the width of the container, not the height (source (http://reference.sitepoint.com/css/margin-bottom)). I don't know the exact reason for this, but there is a simple work-around. Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>My site</title>
<style type='text/css'>
* {padding:0px;margin:0px;}

html, body {
overflow:hidden;
width:100%;
background:#202020;
padding:0px;
margin:0px;
height:100%;
}
#page {
width:100%;
height: 100%;
}
#page td.page {
height:100%;
}
tr.pageMargin {height:10%;}
#page table.page, #page tbody.page,#page td.page {width:100%;height:100%;border-collapse:collapse;}
#contentHolderTR {
width:100%;
height: 80%;
background:#a18c4a;
}
#contentHolderTD {
width:100%;
height: 100%;
background:#a18c4a;
}
</style>

</head>
<body>
<div id='page'>
<table class='page'>
<tbody class='page'>
<tr class='pageMargin' ><td class='page'></td></tr>
<tr id='contentHolderTR'><td id='contentHolderTD'></td></tr>
<tr class='pageMargin' ><td class='page'></td></tr>
</tbody>
</table>
</div>
</body>
</html>