Making images\divs line up perfectly
- kc0tma
- o|||||||o
- Joined: Jul 20, 2007
- Posts: 3318
- Loc: Trout Creek, MT
- Status: Offline
January 16th, 2008, 8:02 am
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:
Here is my code:
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?
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>
<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>
- <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>
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?
Like Mr Spork, I also write about my interest in alcoholic beverages.
- Anonymous
- Bot
- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
January 16th, 2008, 8:02 am
- spork
- Brewmaster
- Joined: Sep 22, 2003
- Posts: 6129
- Loc: Seattle, WA
- Status: Offline
January 16th, 2008, 10:39 am
Play around with the margin and padding. Any by play around with, I mean make them zero. 
The Beer Monocle. Classy.
- kc0tma
- o|||||||o
- Joined: Jul 20, 2007
- Posts: 3318
- Loc: Trout Creek, MT
- Status: Offline
January 16th, 2008, 1:20 pm
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.
Like Mr Spork, I also write about my interest in alcoholic beverages.
- righteous_trespasser
- Scuffle
- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
January 17th, 2008, 2:35 am
Let's leave all our *plum* where it is and go live in the jungle ...
- kc0tma
- o|||||||o
- Joined: Jul 20, 2007
- Posts: 3318
- Loc: Trout Creek, MT
- Status: Offline
January 17th, 2008, 7:53 am
Like Mr Spork, I also write about my interest in alcoholic beverages.
- kbergmann
- Expert
- Joined: Dec 04, 2007
- Posts: 659
- Loc: USA
- Status: Offline
January 17th, 2008, 8:25 am
- neksus
- Mastermind
- Joined: Sep 10, 2004
- Posts: 2194
- Loc: Canada
- Status: Offline
April 1st, 2008, 9:01 pm
- Bogey
- Bogey
- Joined: Jul 14, 2005
- Posts: 8211
- Loc: USA
- Status: Offline
April 1st, 2008, 10:24 pm
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
- neksus
- Mastermind
- Joined: Sep 10, 2004
- Posts: 2194
- Loc: Canada
- Status: Offline
April 2nd, 2008, 7:22 am
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 9 posts
- Users browsing this forum: No registered users and 138 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
