homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Changing order of layout
ocon

5+ Year Member



 
Msg#: 4489246 posted 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

10+ Year Member



 
Msg#: 4489246 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved