Fri, 2004-09-24 10:19
<h1 style="border:1px solid black;"> <span style="float:left">Admin area</span> <span style="float:right">Welcome Seb blah blah blah</span> </h1>
The border will not go around the text, instead the h1 acts as if it's 0px tall.
Adding an " " fixes this, since then there is some non-floated text that sorts it out.
<h1 style="border:1px solid black;"> <span style="float:left">Admin area</span> <span style="float:right">Welcome Seb blah blah blah</span> </h1>
However, in a more complex example
<div style="border:1px solid black;"> <div style="float:left">content</div> <div style="float:right">content</div> </div>
You can't just add an " " to that, since the two internal <div>s may be 100px high or whatever.
So how do you do it?
The best I can come up with is by placing a "<p>style="clear:both"> </p>" after the two <div>s, but that's as unsatisfatory as the " " solution - is there not a CSS solution?
Having one div not floated isn't an option since that leads to problems with andy block level elements in the non-floated div that have a border or background applied.
Fri, 2004-09-24 10:31
#1
Very simple float problem
Seb - I might be wrong but I think your problem here lies in the fact that you are trying to manipulate inline elements as if they are block elements. Putting the non-breaking space in just gives the h1 tag a height of the default line-height - nothing more complex than that. Try forcing things to blocks ( display: block; ) with dimensions before you try to manoeuvre them.
Fri, 2004-09-24 11:37
#2
Very simple float problem
No, the problem is that by floating something you "remove it from the flow".
<div>s are not inline, you div 
And I know that's why the thing works in the example I gave, I'm no div! 
Fri, 2004-09-24 12:01
#3
Very simple float problem
I take quick glances at this forum as I work and I did not read your post thoroughly enough. I noticed that your first example was not using div's and just jumped in too soon. Sorry - I'm a div!
So; your problem is the classic 'insert divs in a wrapper div' one whereby the container needs to enclose the contents. The answer is to float the container too.
Fri, 2004-09-24 13:24
#4
Very simple float problem
Sorry, I'm the slow one now, could you give me an example of what you mean? Sounds like a hack but I'd like to see anyway....
Fri, 2004-09-24 13:40
#5
Very simple float problem
seb wrote:
Sorry, I'm the slow one now, could you give me an example of what you mean? Sounds like a hack but I'd like to see anyway
<div style="float: left; border:1px solid black;"> <div style="float: left;">content</div> <div style="float: right;">content</div> </div>
Fri, 2004-09-24 14:16
#6
Very simple float problem
Ah I see, from your wording I thought you were saying I needed to add 2 more <div>s!
Nice solution, I should have thought of that, though I don't really understand why it works?
Fri, 2004-09-24 14:47
#7
Very simple float problem
I don't know - I suppose it has something to do with the way that a float forces other elements to move around itself. It must assign itself a definite width and height to suit its contents because the browser knows exactly where its extremities are, which also means that it has extremities to mark with a border, if you know what I mean :?
...so am I still a div then