homepage Welcome to WebmasterWorld Guest from 54.196.198.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved