Making images\divs line up perfectly

  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

Yesterday I was playing around (nothing important) trying to get a paragraph go around an image. I got that to work ok by putting part of an image as a background for one div, then floated it left. The paragraph occupied the space to the right, then when it got farther down the page than the image, it went full width just like I wanted. But where I have the top half of an image and the bottom half of an image coming together, there is a small gap:

Image

Here is my code:

Code: [ Select ]
<html>
  <head>
    <title>Image testing</title>
    <style type="text/css">
      #container {
        width: 512px;
      }
      #top {
        width: inherit;
        background: white url('top2.png') no-repeat top center;
        height: 200px;
        width: 512px;
      }
      #bottom {
        width: inherit;
      }
      #pic {
        float: left;
        background: white url('bottom.png') no-repeat top center;
        width: 200px;
        height: 133px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="top"></div>

        <div id="pic"></div>
        <p>Paragraph shortened to make it take up less space in the thread.</p>
        <p>Paragraph shortened to make it take up less space in the thread.</p>
      </div>
  </body>
</html>
  1. <html>
  2.   <head>
  3.     <title>Image testing</title>
  4.     <style type="text/css">
  5.       #container {
  6.         width: 512px;
  7.       }
  8.       #top {
  9.         width: inherit;
  10.         background: white url('top2.png') no-repeat top center;
  11.         height: 200px;
  12.         width: 512px;
  13.       }
  14.       #bottom {
  15.         width: inherit;
  16.       }
  17.       #pic {
  18.         float: left;
  19.         background: white url('bottom.png') no-repeat top center;
  20.         width: 200px;
  21.         height: 133px;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div id="container">
  27.       <div id="top"></div>
  28.         <div id="pic"></div>
  29.         <p>Paragraph shortened to make it take up less space in the thread.</p>
  30.         <p>Paragraph shortened to make it take up less space in the thread.</p>
  31.       </div>
  32.   </body>
  33. </html>


What should I do to make that tiny gap go away? It shows in both IE7 and firefox. I'll put my pictures I was using in the kc0tma photobucket page if anyone wants to play.

@celandine: see how ridicuously simple that turned out to be?
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6254
  • Loc: Seattle, WA

Post 3+ Months Ago

Play around with the margin and padding. Any by play around with, I mean make them zero. ;)
  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

No luck with padding and margins. Believe it or not, the gap was actually bigger for a while yesterday, but I had extra divs and junk in there that weren't doing anything, so I remade it and got the results you see above. Looking at the file now, I can't see anything else in there to trim out.

:?:
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

try:
Code: [ Select ]
position:relative;
top:-1px;
left:0px;
  1. position:relative;
  2. top:-1px;
  3. left:0px;
  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

You know what R_T? That worked. But I noodled up my own graffics. I played around with the pixel values, and it moved the image around, but no matter how far I moved it up it still had that little one pixel white line. Woops...I have a little white stripe on the top of the bottom half of my banana. So I did learn to never use auto crop, always always ALWAYS crop it by hand.

Thanks for your help spork and R_T!
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Good to know. I tend to crop by hand as is, but will stay away from auto cropping. You learn something new every day.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Some browsers will also display the gap because your tags aren't touching.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

So I take it that this is fixed now... right?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I think he had a space in his actual image and it was unrelated to the code lol

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 26 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.