| Changing order of layout
|
ocon
msg:4489248 | 8:26 pm on Aug 28, 2012 (gmt 0) |
I can imagine it's not the best html to work with, but I can't change it.
I'm trying to use CSS to change the order of the following content, to when it's displays the first one shows as:
Top
Middle
Bottom
And the second one as:
Top
Middle
The heights of everything varies, and the top, middle and bottom sections should all have 100% width.
I've been working with floating left and right, but is this possible?
First Code:
<div class='w' >
<div class='out'>
<div class='inr'>Middle</div>
</div>
<span class='a'>Top</span>
<span class='b'>Bottom</span>
<div style='clear:both'></div>
</div>
Second Code:
<div class='w' >
<div class='out'>
<div class='in'>Middle</div>
</div>
<span class='a'>Top</span>
<div style='clear:both'></div>
</div>
|
Paul_o_b
msg:4489377 | 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.
|
|
|
