CSS float

[emus]

Hi everyone,

I have a slight problem with the following code

<div style="float:left">abc</div>
<div style="border:1px solid #000000">def</div>

Why does the border encompass the first div when it is only specified in the second div?

Thanks,

emus

[bdl]

Hmm. I don't know that I've seen the float property used like that; you might try this instead (what I take you're going for) -

<div align="left">abc</div>
<div style="border:1px solid #000000";>def</div>

If I'm not mistaken, the float property makes the element's position 'absolute' for lack of a better word. It's static in its positioning, in other words. Other elements are supposed to flow around it, although another <div> tag may not (which is what we're seeing here)...

[ender]

I think I have found some solutions to your problem, although they are not all that pretty.

The first thing you could do is make your side-bars a fixed width and then back non-floated div 100 px to the right to make it seem as though you want:

<div style="float:left; width:100px;">abc</div>
<div style="border:1px solid #000000; margin-left: 102px">def</div>

Another thing you could do is 'fake' the no-border like the following:

<div style="border-left: 1px solid #FFFFFF; border-right: 1px solid #000000;
	border-top: 1px solid #FFFFFF; border-bottom: 1px solid #000000;
	float: left; margin: 0px;">abc</div>
<div style="border:1px solid #000000;">def<br>ghi</div>

This however, is not very pretty as it forces you to have the non-floated div to have more than one line of content, and it forces some strict rendering tricks to get it to work.

I can look into this further if you want, but that is what I came up with for now.

Thanks,
Ted Morse

[emus]

Thanks a lot bdl and ender.
I'll try both solutions and let you know the results.


emus

[emus]

Here is what I did.

Since the right side is tabular data, I suppose it would be acceptable to use tables instead of divs.

<div style="float:left;margin-right:10px">Label</div>
<table style="border:1px solid #000000">
	<tr>
		<td> data 1</td>
	</tr>
	<tr>
		<td> data 2</td>
	</tr>
</table>

thanks again for your help,

emus