Topic: Positioning inline objects (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=11115" title="Pages that link to Topic: Positioning inline objects (Page 1 of 1)" rel="nofollow" >Topic: Positioning inline objects <span class="small">(Page 1 of 1)</span>\

 
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 12-12-2003 03:46 Edit Quote

Hi guys, I've a quick question about positioning objects that are inline.

I have a webpage with a footer this is a div that covers the width of the screen,
inside this div I want a piece of text to be displayed on the left side, and a piece of text to be displayed on the right side.

I was thinking about putting one group of text into a span and floating it right, making sure it's display is set to inline but this still makes it display on the the line below albeit on the right, am I thinking about this the right way, is there and easier way to accomplish such a thing?

Cheers,

Blaise

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 12-12-2003 06:27 Edit Quote

Float should do it... can we see the page?


___________________________
Suho: www.liminality.org

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 12-12-2003 07:16 Edit Quote

is there enough room for it to float?


Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 12-12-2003 14:16 Edit Quote

DIV#footer DIV#left {
float: left;
}

DIV#footer DIV#right {
float: right;
}

<DIV ID="footer">
<DIV ID="left">This text is on the left.</DIV>
<DIV ID="right">This text is on the right.</DIV>
</DIV>

That should work.

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-12-2003 15:57 Edit Quote

just as H][RO asked, 'is there enough room?'
Be safe and add width and clear elements to that stylesheet.

code:
DIV#footer DIV#left {
width:45%;
float: left;
clear:left;
}

DIV#footer DIV#right {
width:45%;
float: right;
clear:right;
}

<DIV ID="footer">
<DIV ID="left">This text is on the left.</DIV>
<DIV ID="right">This text is on the right.</DIV>
</DIV>



The only problem this might create is the collapsing of the footer div -- as floated elements no longer take up space in the document (in Gecko browsers -- Mozilla, Netscape, Firebird, etc)
The only solution I know of is to add a block element under the two floated divs which is set to clear:both.
Not a great solution, but the only one I know.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu