Changing order of layout

Forum Moderators: not2easy

Message Too Old, No Replies

Changing order of layout

ocon

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

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.