3 replies [Last post]
ieure
Offline
newbie
Last seen: 10 years 52 weeks ago
Joined: 2003-10-28
Posts: 2
Points: 0

I'm trying to get two elements aligned on opposite edges of the browser window, on the same horizontal line. E.g.

<table>
<tr>
<td style="text-align: left;">one</td>
<td style="text-align: right;">two</td>
</tr>
</table>

...but without tables. I've tried everything I can think of, and I can't get it to work. If I use two <div/>s, they display one under the other, instead of next to each other. If I use <span/>s, I can't get the "two" span against the right edge of the viewport.

I tried using a margin-top of -1em for the second div, but it's going to display form controls, which vary in height from browser to browser, so that's out.

Can someone show me how to do this simple thing, please?

timmah
Offline
newbie
Last seen: 11 years 1 day ago
Joined: 2003-10-26
Posts: 3
Points: 0

two divs on one line

#left { float: left;}

#right { float: right;}

<div id="left">Stuff</div>
<div id="right>Here</div>

try that. Smile

ieure
Offline
newbie
Last seen: 10 years 52 weeks ago
Joined: 2003-10-28
Posts: 2
Points: 0

two divs on one line

timmah wrote:
#left { float: left;}

#right { float: right;}

<div id="left">Stuff</div>
<div id="right>Here</div>

try that. Smile
Unfortunately, that doesn't work for me. I guess I should have been clearer.

I need both elements to be inside a containing block with a background color. If I stick those two divs inside a containing div, the container collapses down to nothing. I can manually specify a height on the container, but the form controls aren't always going to be 1em high. If I float only the right-hand div, it floats underneath the containing div. Again, since it's height is going to vary, I can't simply specify a margin-top of -1em.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 7 hours 26 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

two divs on one line

Hi ieure,
If you put a clearing div after the left and right but still inside the container you should get what your after.

#left { float: left;} 
#right { float: right;} 
 
<div class="container"> 
 <div id="left">Stuff</div> 
 <div id="right>Here</div> 
 <div style="clear:both;"></div> 
</div>

Hope that helps