|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
 AT&T devCentral & BlackBerry(r) Webcast Series: BlackBerry and GPS -Build Location Awareness into your BlackBerry Applications, July 10th-1:00PM EST. Register Today!
|
|
#1
April 14th, 2004, 10:57 PM
|
|||
|
|||
|
DIV positioning
I would like to place three DIV's next to each other. When the body.width
is less than than width of the first DIV I do NOT want the next two DIV's to wrap. How can I prevent this? I have tried position:absolute and flow:right/left without effect. Cheers, Colin.
|
|
#2
April 15th, 2004, 02:33 AM
|
||||
|
||||
|
Hmmm... interesting problem.... have your tried setting the body width to something larger than the sum of the 3 divs? And yes, you will need to use float:left on the divs to get them on the same line, or you can use absolute positioning.
e.g. body { width : 2000px; } You will probably get hoz scroll bars though.
|
|
#3
April 15th, 2004, 05:50 PM
|
|||
|
|||
|
The three DIV's are sized automatically to fill the body.width during client side onload and resize, so as to always look nice. It's cool with a wide body but the user may have a smaller window size. I require the exact effect of having three TD's in a single TR. i.e, no wrapping, no overlapping, no layering. scroll bars are OK though.
|
|
#5
April 16th, 2004, 03:26 AM
|
|||
|
|||
|
This is the result of my efforts: Drag the thin line in the middle to resize dynamically. (IE aware only)
Code:
<html>
<HEAD>
<style type="text/css">
body {
}
#div22 {
Position: absolute;
left : 210px;
border : solid 1px green;
background-image : url(blue-wave-back.jpg)
}
#div3 {
position:absolute;
height:90%;
width:100px;
border:solid 2px red;
}
#div4 {
position:absolute;
height:90%;
width:60%px;
left:140px;
border:solid 2px blue;
}
#image2 {
cursor:col-resize;
backgroundRepeat=repeat-y;
}
</style>
<SCRIPT language="javascript">
/* only the img tag supports dragging without first selecting text */
var xOffSetL = 10;
var xOffSetR = 5;
function window.onload() {
image2.style.height = document.body.clientHeight - (image2.offsetTop+20);
div22.style.posLeft = 150;
div3.style.posWidth = (div22.style.posLeft-xOffSetL);
div4.style.posLeft = (div22.style.posLeft+xOffSetR);
div4.style.posWidth = document.body.clientWidth - div4.offsetLeft;
}
function MoveIt() {
var x=event.x+document.body.scrollLeft;
div22.style.posLeft = x-3;
div3.style.posWidth = (div22.style.posLeft-xOffSetL);
div4.style.posLeft = (div22.style.posLeft+xOffSetR);
div4.style.posWidth = document.body.clientWidth - div4.offsetLeft;
}
</SCRIPT>
</HEAD>
<BODY>
<div id="div22" ondrag="MoveIt()" ><img id="image2" src="" width="3" height="300" ></div>
<div id="div3" >div3</div>
<div id="div4" >div4</div>
</BODY>
</html>
|
|
#6
May 6th, 2004, 03:53 PM
|
|||
|
|||
|
You might try wrapping the whole thing in a table cell, and put nowrap on the table cell... Might work... might not
<table height="100%" width="100%"> <tr> <td nowrap="nowrap" height="100%" width="100%"> <div id="div1">..... ...</div> </td></tr></table>
|
|
#7
May 10th, 2004, 03:41 AM
|
|||
|
|||
|
Simple option
Quote:
There are many options but a simple solution is placing the DIV's between NOBR tags...
|
|
#9
May 29th, 2004, 11:14 AM
|
|||
|
|||
|
some idea
That is kinda the problem I had. You could always save it as a picture and then it wouldn't wrap. What I mean is if you have a picture of what is in that div then it would use a scroll bar to see the rest of the picture. just put it in the spot you want and auto scroll. It is the only thing that I have found to work. I used it and wanted to have links and then learned about image mapping to place links and everything looked really nice.
|
|
| Viewing: Dev Articles Community Forums > Web Design > Web Development > DIV positioning |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
 |
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
