1. Home
  2. Forums Index
  3. Browser Side / CSS 6:05 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

two floating div elements

problem rearranging

         

rson451

3:58 am on Jan 3, 2008 (gmt 0)

10+ Year Member



I've got two floating elements - one float left, one float right (eg. [1][2]). I can easily swap these two - [2][1] by switching the float on each. I can also easily make the second element sit below the first by setting the second to clear:both resulting like below:
[1]
[2]

What I need: allow all three of the previous scenarios as well as allow the second element above the first.
The problem: clear:both only clears floats defined before the definition of the element in html so setting clear:both on the first element doesn't clear the second floating element. The elements are basically defined as follows in each of the three working scenarios

1. [1][2] 


<div id="one" style="float:left; clear: none;">[1]</div>
<div id="two" style="float:right; clear: none">[2]</div>

2. [2][1] 

<div id="one" style="float:right; clear: none;">[1]</div>
<div id="two" style="float:left; clear: none">[2]</div>

3. [1] on top, [2] on bottom 

<div id="one" style="float:left; clear: none;">[1]</div>
<div id="two" style="float:none; clear: both">[2]</div>

4. [2] on top, [1] on bottom? 

<div id="one" style="float:?; clear:?;">[1]</div>
<div id="two" style="float:?; clear:?">[2]</div>

javascript is used to change between these styles. Any thoughts or suggestions would be greatly appreciated.

birdbrain

2:24 pm on Jan 3, 2008 (gmt 0)



Hi there rson451,

and a warm welcome to these forums. ;)

Have a look at this example, it may suit your requirements... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#swap {
 width:180px;
 line-height:30px;
 text-align:center;
 border:3px double #999;
 cursor:pointer;
 margin:20px auto;
 }
#container {
 position:relative;
 width:100%;
 height:50px;
 padding-top:10px;
 border:1px solid #000;
 }
.left {
 float:left;
 margin-left:10px;
 }
.right {
 float:right;
 margin-right:10px;
 }
.basic_lft {
 margin-left:10px;
 }
.basic_rgt {
 margin-left:10px;
 }
.abs_bottom {
 position:absolute;
 top:28px;
 left:10px;
 }
.abs_top {
 position:absolute;
 top:10px;
 left:10px;
 }
</style>
<script type="text/javascript">
var text=[
'position one',
'position two',
'position three',
'position four'
]
var classes=[
'left,right',
'right,left',
'basic_lft,basic_rgt',
'abs_bottom,abs_top'
]
var c=0;
window.onload=function() {
document.getElementById('swap').onclick=function(){
changePosition(this);
 }
 }
function changePosition(obj) {
if(c==3) {
 c=-1;
 }
c++;
obj.firstChild.nodeValue=text[c];
document.getElementById('one').className=classes[c].split(',')[0];
document.getElementById('two').className=classes[c].split(',')[1];
 }
</script>
</head>
<body>
<div id="swap">position one</div>
<div id="container">
 <div id="one" class="left">[1]</div>
 <div id="two" class="right">[2]</div>
</div>
</body>
</html>

birdbrain

rson451

3:32 pm on Jan 3, 2008 (gmt 0)

10+ Year Member



birdbrain: Thanks for taking the time to reply. One thing I guess I didn't note in my original post is that I won't know the heights of [1] or [2] so absolute positioning won't work properly (any way I can find at least). Since I posted, I've come up with a very scripty hackish way of doing it which I really would like to avoid if possible, but it works.

<html>
<head>
<style>
.left{
float: left;
}

.right{
float: right;
}

.no_float{
float: none;
}
</style>
<script>

function ttop()
{
one = document.getElementById('one');
two = document.getElementById('two');
if(one.style.display == "none")
{
swap();
}

one.className="no_float";
two.className="no_float";
}

function bottom()
{
one = document.getElementById('one');
two = document.getElementById('two');
three=document.getElementById('three');
if(three.style.display == "none")
{
swap();
}

two.className = 'no_float';
three.className = 'no_float';
}

function left()
{
one = document.getElementById('one');
two = document.getElementById('two');
if(one.style.display == "none")
{
swap();
}

one.className="left";
two.className="right";
}

function right()
{
one = document.getElementById('one');
two = document.getElementById('two');
if(one.style.display == "none")
{
swap();
}

one.className="right";
two.className="left";
}

function swap()
{
one=document.getElementById('one');
three=document.getElementById('three');
if(three.style.display == "none")
{
three.innerHTML = one.innerHTML;
three.style.display='block';
one.style.display='none';
}
else
{
one.innerHTML = three.innerHTML;
three.style.display = 'none';
one.style.display = 'block';
}
}

</script>
</head>
<body>

<a href="#" onClick="javascript:ttop();">top</a>
<a href="#" onClick="javascript:bottom();">bottom</a>
<a href="#" onClick="javascript:left();">left</a>
<a href="#" onClick="javascript:right();">right</a>

<div id="one" class="left">[1]</div>
<div id="two" class="right">[2]</div>
<div id="three" style="display:none;"></div>

</body>
</html>


Thoughts?

ps. Since I am new here, the rules say to not post urls, but would a pastebin be appropriate so I don't spam the thread with large chunks of code? Pastebins certainly are not promotional :)

birdbrain

5:20 pm on Jan 3, 2008 (gmt 0)



Hi there rson451,

I won't know the heights of [1] or [2] so absolute positioning won't work properly (any way I can find at least).

The code that I posted was just a basic example. ;)

The following will overcome the height problems... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 margin:0
 padding:0;
 }
#swap {
 width:180px;
 line-height:30px;
 text-align:center;
 border:3px double #999;
 cursor:pointer;
 margin:20px auto;
 }
#container {
 position:relative;
 padding-top:10px;
 }
#one {
 background-color:#fee;
 text-align:justify;
 }
#two {
 background-color:#eef;
 text-align:justify;
 }
#one p,#two p {
 margin:10px;
 }
.left {
 width:50%;
 float:left;
 }
.right {
 width:50%;
 float:right;
 }
.basic_lft {
 }
.basic_rgt {
 }
.abs_bottom {
 position:absolute;
 width:100%;
 }
.abs_top {
 position:absolute;
 width:100%;
 }
</style>
<script type="text/javascript">
var text=[
'position one',
'position two',
'position three',
'position four'
]
var classes=[
'left,right',
'right,left',
'basic_lft,basic_rgt',
'abs_bottom,abs_top'
]
var c=0;
var obj1,obj2;
window.onload=function() {
obj1=document.getElementById('one');
obj2=document.getElementById('two');
document.getElementById('swap').onclick=function(){
changePosition(this);
 }
 }
function changePosition(obj) {
if(c==3) {
 c=-1;
 }
c++;
obj.firstChild.nodeValue=text[c];
if(c==3) {
obj1.style.top=obj2.offsetHeight+40+'px';
 }
obj1.className=classes[c].split(',')[0];
obj2.className=classes[c].split(',')[1];
 }
</script>
</head>
<body>
<div id="swap">position one</div>
<div id="container">
<div id="one" class="left">
<p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, orci. 
Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum augue non purus. 
Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet interdum eros. Pellentesque sit 
amet enim id nunc adipiscing ultricies. Quisque lobortis eleifend elit. Sed eu augue sed felis 
vulputate iaculis. Cras lorem felis, lobortis id, accumsan vel, facilisis quis, dolor. Curabitur 
aliquet. Nulla facilisi. Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. 
Maecenas elementum volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, 
nulla. Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>
<div id="two" class="right">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div>
</div>
</body>
</html>

birdbrain

rson451

6:13 pm on Jan 3, 2008 (gmt 0)

10+ Year Member



Thanks again birdbrain! I _never_ new about the offsetHeight property. I always thought to use just height but that doesn't get set unless you specifically put a height in the css. I'll be saving this code for future reference. Thanks.

birdbrain

6:28 pm on Jan 3, 2008 (gmt 0)



No problem, you're very welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:05 am May 2, 2026