Posted: Mon Aug 21, 2006 3:35 pm
No, that wasn't my intention.The original poster also seemed to want to do this in a more dynamic way, as in, being able to swap the two divs after they have been originally rendered on the screen.
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
No, that wasn't my intention.The original poster also seemed to want to do this in a more dynamic way, as in, being able to swap the two divs after they have been originally rendered on the screen.
Even with absolute position, how would you calculate the top for the first div if the height of the second div is unknown?The only way to do it in pure CSS is to use absolute positioning.
I thought you were wanting an end user to be able to move a box up or down in the document flow.Weirdan wrote:Where is the dynamic you're referring to here?
But how do you get the first one below? In the html the first div is being parsed first. It gets a default width of 100%. Ok, first box is set. Now in the code comes the second div. Float it left and give it 300px width (same as container div). It will neatly float left. .. below the second div.If you want the bottom div(2) to show on top, just float it left and set the width to the same width as the container. div1 one will drop below it.
No, they have enough dynamic without moving these boxes around the document treeI thought you were wanting an end user to be able to move a box up or down in the document flow.
Have you tested it? I have, and I can tell you from my experience that order does matter.Floats are taken out of the document flow, order does not matter, it will float to the top of the container.
Code: Select all
<html>
<head>
<meta/>
<title>Test</title>
<style type="text/css">
#container {
width: 768px;
height: 500px;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#div1 {
background-color: #084275;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#div2 {
background-color: #254708;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
</style>
<script language="JavaScript">
<!--
function swap() {
var box1 = document.getElementById('div1').innerHTML;
var box2 = document.getElementById('div2').innerHTML;
document.getElementById('div1').innerHTML = box2;
document.getElementById('div2').innerHTML = box1;
}
-->
</script>
</head>
<body onload="swap();">
<div id="container">
<div id="div1">
<p>This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1</p>
</div>
<div id="div2">
<p>This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2</p>
</div>
</div>
</body>
</html>
InnerHTML is not part of the javascript spec. It was introduced by IE and other browsers implemented it because of its wide usage. Il lpost something soonastions wrote:Well I screwed around with it for a while and couldn't get it to work. I'm sure there is a way to do it though.
This is the closest thing that I found so far..
http://www.fu2k.org/alex/css/onetruelay ... nteractive
EDIT: I wrote this up and it works in firefox. It uses javascript though..
Code: Select all
<html> <head> <meta/> <title>Test</title> <style type="text/css"> #container { width: 768px; height: 500px; border-width: 1px; border-style: solid; border-color: #000000; } #div1 { background-color: #084275; border-width: 1px; border-style: solid; border-color: #000000; } #div2 { background-color: #254708; border-width: 1px; border-style: solid; border-color: #000000; } </style> <script language="JavaScript"> <!-- function swap() { var box1 = document.getElementById('div1').innerHTML; var box2 = document.getElementById('div2').innerHTML; document.getElementById('div1').innerHTML = box2; document.getElementById('div2').innerHTML = box1; } --> </script> </head> <body onload="swap();"> <div id="container"> <div id="div1"> <p>This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1</p> </div> <div id="div2"> <p>This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2</p> </div> </div> </body> </html>
for sureastions wrote:Well the fact that it works is great considering I don't know javascript and guessed it.
Code: Select all
<html>
<head>
<meta/>
<title>Test</title>
<style type="text/css">
#container {
width: 768px;
height: 500px;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#div1 {
background-color: #084275;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#div2 {
background-color: #254708;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
</style>
<script language="JavaScript">
<!--
function swap() {
var container = document.getElementById('container');
var box1 = document.getElementById('div1');
var box2 = document.getElementById('div2');
container.insertBefore(box2,box1);
}
-->
</script>
</head>
<body onload="swap()">
<div id="container">
<div id="div1">
<p>This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1 This is div 1</p>
</div>
<div id="div2">
<p>This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2 This is div 2</p>
</div>
</div>
</body>
</html>
Well, in that case there are solutions to your problem. No need to swap divs or use javascript. Use the content order you want and use one of the nifty negative margin techniques to layout the cols in the right way. Maybe something like Ryan Brill did in his alistapart article or Thierry or the one true layout astions linked to.I have pretty standard three-column layout where left and right columns are of fixed width and floated to right and left respectively. Because they are floated when viewed on desktop computers, they have to appear in document source before the middle column. But when viewed on handheld there isn't enough space to have three columns. I would like to degrade the layout to single column in this case. Naturally, most important content is placed in the middle column, thus in single-column variant I want it to appear before the content that was in side bars. I thought I would be able to keep the markup the same and achieve the required layout using different css only.
Correct me if I'm wrong, but would it be possible to reorder blocks using negative margins from:margin techniques to layout the cols in the right way
Code: Select all
+--------------++---------------------++--------------+
| || || |
| left column || center column || right column |
| || || |
| || || |
+--------------++---------------------++--------------+Code: Select all
+-----------------+
| |
| center column |
| |
+-----------------+
+-----------------+
| |
| left column |
| |
+-----------------+
+-----------------+
| |
| right column |
| |
+-----------------+