Welcome to WebmasterWorld Guest from 54.144.72.150

Forum Moderators: not2easy

Message Too Old, No Replies

Changing order of layout

     
8:26 pm on Aug 28, 2012 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:222
votes: 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>
7:53 am on Aug 29, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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.