<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.
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.
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!
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.
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....
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
<div style="float: left; border:1px solid black;"> <div style="float: left;">content</div> <div style="float: right;">content</div> </div>
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?
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