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: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
