Mon, 2014-09-15 23:50
This is similar to my previous question -- but I've removed all absolute postioning and made a test case that I can post here.
I need a container to surround everything from the header to footer, with the lines "stuff above content" and "stuff below content" to be outside, above and below, that container, but I can't get it to work.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<style>
.box {
position:relative;
height:39px;
width:93px;
text-align:center;
background:#def;
border:1px solid #f00;
}
.box p {
font-size:12px;
margin-top:4px;
}
.header, .footer {
position:relative;
left:0;
width:960px;
padding:4px;
background:#009;
color:#eef;
text-align:center;
}
.header h1 { margin:0; }
</style>
</head>
<body style="margin:0; padding:0;">
<div><h1>Stuff above content</h1></div>
<!-- an outer container -->
<div style="
display:inline-block;
border:1px solid cyan;
background:green;
">
<!-- another container -->
<div style="
border:1px solid red;
background:yellow;
width:100%;
height:100%;
">
<!-- header -->
<div class="header" style="top:12px;">
<h1>Test Heading</h1>
</div>
<div class="box" style="top:120px; left:102px;">
<p>box 1</p>
</div>
<div class="box" style="top:203px; left:502px;">
<p>box 2</p>
</div>
<!-- footer -->
<div class="footer" style="top:360px; height:38px;">
Footer stuff
</div>
</div>
<br><br><br>
<div style="z-index:999;"><h1>Stuff below content</h1></div>
</div>
</body>
</html>
Any help appreciated.
Fri, 2014-09-19 21:35
#1
remove absolute positioning means not setting top or left
you have put position relative in your top css part but in the html section you've set the top with the style attribute
i think that when you set the top from the style element it kindof overrides position relative in the css section above. if you remove that then you get a more typical flow layout, but perhaps not the positioning you wanted of the boxes, you can indent them with a margin or set width to move them around horizontally