Topic: Common problem? A Floating Left Div not touching Right Div (Page 1 of 1)

I have a div on the left "floating" there. On the right is one or more divs. The intention is that everything bumps up nicely, but they are not. There is about a 3px gap between the left column and right column. Is this common and is there a *standard* fix or do I need to give more details about what my HTML looks like thus far?

Thanks,

Karl..

Hard to say why the engine doesn't run if you don't drop off the car ...



(Edited by Wes on 12-31-2005 22:19)

Bighting my tongue (wes), I suggested that I would provide more details if necessary.

3 pixel jog, IE specific.

#left {float:left;width:182px;}
#main {margin-left:183px;}

/* IE/Win 3px jog fix, hide from IE5-mac. Only IE/Win can see this. \*/
	* html #left {margin-right: -3px;}
	* html #main {margin-left:180px;}
/* End hide from IE5/mac */

Ramasax

quote:

---

Karl said:

Bighting my tongue (wes), I suggested that I would provide more details if necessary.

---

It should be taken for granted that an example page of the code in question should be posted to accompany such questions... =)


FWIW

quote:

---

Karl said:

... I suggested that I would provide more details if necessary.

---

And that was my friendly suggestion that you should, which you apparently understood and yet still did not.

Sorry Wes, I was just a little cranky the other day and should have taken your hint a little less personally ; )
Happy New Years!

Karl..

Ramasax,
Thanks for the tip, this is working out nicely.
Karl..

*hoping someone takes a look at this*

I have a new problem. I have an img, followed by a div, and the div does not butt-up to the img. The img should be ontop, and the div element exactly underneath with no spaces, except there is a space.

I have the following code defined:

.nospace { margin:0; padding:0 }
.border { border:solid 1px black; }

<img src="images2/WhereEveryChildFeelsLikeACh.gif" width="549" height="29" border="0" class="nospace" />
<div class="border">this is a test</div>

are you sure there is no margin or padding in your DIV ?
try to put a background-color in the IMG and DIV.

In which browsers do you have this problem ? have you had a look at the IMG and DIV tags within a DOM Inspector to see which Stylesheet Rules are applied to them, and their computed style ?



(Edited by poi on 01-02-2006 21:16)

Yep, I'm sure there are no extra spaces. It seems that there is an issue with and img lined up tight with a block element.

So:

<img ... >
<div ...>
</div>

I'm suggesting that you can't get the image's bottom to touch the div's top.

quote:

---

In which browsers do you have this problem ? have you had a look at the IMG and DIV tags within a DOM Inspector to see which Stylesheet Rules are applied to them, and their computed style ?

---

Oh, and in case you are doing some web design in MSIE (eeek) try with no white-space between the IMG and DIV tags.

Another thing to try'd be a 'display: block;' in the 'nospace' class instead of the zero margin and padding rules. (Which you might then, of course, give a more suitable name like 'blockel' or something )

As Kuckus noted - the display value of the iamge is actually causing the problem here. The image is by default inline, the div block. In some browsers this causes a space.

Since the desired effect is for the image to display block, specify that in the CSS, and it will work fine in all major browsers.

Setting the img to an element of type block fixed the problem. Thanks!

Karl..