Topic: Common problem? A Floating Left Div not touching Right Div (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27232" title="Pages that link to Topic: Common problem?  A Floating Left Div not touching Right Div (Page 1 of 1)" rel="nofollow" >Topic: Common problem?  A Floating Left Div not touching Right Div <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 12-31-2005 17:24

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

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 12-31-2005 22:19

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 12-31-2005 23:32

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

Ramasax
Maniac (V) Inmate

From: PA, US
Insane since: Feb 2002

posted posted 01-01-2006 04:03

3 pixel jog, IE specific.

code:
#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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-01-2006 23:57
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

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 01-02-2006 03:49
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.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-02-2006 06:08

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-02-2006 19:23

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-02-2006 20:35

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 01-02-2006 21:13

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-02-2006 21:47

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 01-02-2006 22:08
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.

kuckus
Paranoid (IV) Mad Librarian

From: GlieBeGe
Insane since: Dec 2001

posted posted 01-02-2006 23:09

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 )

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-02-2006 23:49

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.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-03-2006 05:17

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

Karl..



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu