Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Changing order of layout


Paul_o_b - 7:53 am on Aug 29, 2012 (gmt 0)


Hi,

The first one is impossible in any usable way (outside of css3 flexbox.

The second one can be done like this and can contain fluid content as required.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.w{
position:relative;
width:100%;
}
.a{
display:block;
}
.out{
position:absolute;
top:100%;
width:100%;
left:0;
}

</style>
</head>

<body>
<div class='w' >
<div class='out'>
<div class='in'>Middle<br>Middle</div>
</div>
<span class='a'>Top<br>top<br>top</span>
<div style='clear:both'></div>
</div>
</body>
</html>



The only drawback is that any extra content would need to follow inside the .out div and follow .in.


BTW That span should be a div as an inline element in that situation is not semantically correct.


Thread source:: http://www.webmasterworld.com/css/4489246.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com