struts-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Steve Raeburn <sraeb...@gmail.com>
Subject Re: [OT] If you hate positioning with css raise your hand... actually some help:)
Date Wed, 04 Jan 2006 04:09:36 GMT
Here's *one* way to achieve what you're after:

<div style="float:left; border: 1px solid black;">
    <div style="float: left">[left]</div>
    <div style="float: right">[right]</div>
</div>
link1<br/>
link2<br/>

Courtesy of Eric Meyer 
http://www.complexspiral.com/publications/containing-floats/

All that's different to your first example is the addition of an 
additional 'float' on the outer div. This causes it to expand to contain 
the inner (floated) divs. Depending on what else you want to add to this 
layout  this might be all you need.

Note that if the outer div is itself contained by another block element, 
it may stick out of its container. Read the above article for the 
explanation and other options. Also check out http://www.meyerweb.com/ - 
Eric is your CSS best friend :-).

Steve

Rick Reumann wrote:

> I always end up with nothing but trouble trying to position divs with 
> css that is a BREEZE to do with tables. css positioning is supposed to 
> be the layout savior yet my experience with it always ends up with 
> headaches - try something, see if it works, try something else, set if 
> it works. Oh and then make sure it's ok in all browsers.. and make 
> sure it works with html strict, bla bla. Anyone else have these 
> frustrations as well or is it just me?
>
> Anyway, since I started down this stupid path, maybe someone can help. 
> yea, I know wrong list, but I'm being lazy..
>
> What I just want as a test is a div with a border around it and then 
> two divs inside that div with text = One set of text aligned in a div 
> to the left, the other in a div text-aligned to the right. Then below 
> the main div some text:
>
> -----------------------------------
> | [left]                  [right] |
> -----------------------------------
> link1
> link2
>
>
> My first shot was:
>
> <body>
> <div style="border:1px solid black;">
>     <div style="float:left;">[left]</div>
>     <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> link1<br/>
> link2<br/>
> </body>
>
> The above ends up with the next set of links aligning up next to the 
> right div and only a top border on the enclosing div.
>
> Now this one sort of works. I still get only a top border on the 
> enclosing div. And I don't see why I need to use <br/> tags to get 
> this to work.
>
> <body>
> <div style="border:1px solid black;">
>     <div style="float:left;">[left]</div>
>     <div style="float:right;text-align:right;">[right]</div>
> </div>
>
> <br/><br/>
>
> link1<br/>
> link2<br/>
> </body>
>
> Any ideas how to get what I want?
>
> I just really stink at this css stuff and the web sites all seem to 
> use different techniques and none of them intuitive. This site has 
> some nice samples http://tutorials.alsacreations.com/modeles/ but 
> often the way it's implemented seems crazy to me (ie having to add 
> huge margins and have other divs fill into those margins, etc).
>
> If divs are the answer why are they so annoying to position?
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Mime
View raw message