7 replies [Last post]
seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

<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 "&nbsp;" 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>&nbsp;
</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 "&nbsp;" 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">&nbsp;</p>" after the two <div>s, but that's as unsatisfatory as the "&nbsp;" 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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 18 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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.

Life's a b*tch and then you die!

seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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 Smile

And I know that's why the &nbsp; thing works in the example I gave, I'm no div! Wink

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 18 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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.

Life's a b*tch and then you die!

seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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....

Smile

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 18 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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>

Life's a b*tch and then you die!

seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 18 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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 Wink

Life's a b*tch and then you die!