Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS: getting two images to sit side by side with no gap

Posted on 2008-10-26
5
Medium Priority
?
1,331 Views
Last Modified: 2013-11-19
Hi, I have two images for tabs that will go at the top of a page.  Initially when I put them in, there was a small gap between them.  To try and fixed this, I used display:block on the image elements.  This of course made them stack vertically, so I added the float:left to the #forums element.  Now the #information element is outside of the container div!

Can anyone sort my code out?

Thanks
#container {
	width: 900px;
}
#top {
	background-color:#e7e2e2;
	border-bottom:15px solid #ffcd05;
	height:75px;
	position:relative;
}
#tabs {
	float:right;
	position:relative;
}
.tab img {
	border:none;
	margin:0;
	display:block;
}
.tab {
	margin:0;
}
#forums {
	float:left;
}
 
</style>
</head>
 
<body>
<div id="container">
<div id="top">
<div id="tabs">
<a class="tab" id="forums" href='#'><img src="forums.png" alt="Forums" /></a>
<a class="tab" id="information" href='#'><img src="information.png" alt="Information" /></a>
</div>
</div>

Open in new window

0
Comment
Question by:deafpanda
5 Comments
 
LVL 3

Accepted Solution

by:
siranm earned 400 total points
ID: 22807331
.img {padding:0px}
0
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 800 total points
ID: 22807622
Hello,

Images and anchors will be on the same line (side by side) by default. There are a few things that will cause the gap:

1) Default margin on the image... I have wiped this out by using * {padding:0;margin:0}, this will erase default margin/padding on ALL elements.

2) whitespace... any whitespace between images will cause a gap

Hope this helps
Dont hesitate to ask if you need more help

Thanks
Steggs
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 400 total points
ID: 22809575
First you get your two image DIVs back the way they were, side by side, then you use this CSS --

DIV, IMG  {padding:0px; margin:0px; border:0px; }  

That will remove the gap.  You can also experiment with overflow:visible; for rendering in IE6.
0
 
LVL 1

Assisted Solution

by:Manish09
Manish09 earned 400 total points
ID: 22811053
try this hope it wll help ! !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {
	width: 900px;
}
#top {
	background-color:#e7e2e2;
	border-bottom:15px solid #ffcd05;
	height:75px;
	position:relative;
}
#tabs {
	float:right;
	position:relative;
	margin:2px 2px 0px 0px
}
.tab img {
	border:none;
	margin:0;
	display:block;
}
.tab {
	margin:0px;
	float:right;
}
#forums {
	float:left;
}
 
</style>
</head>
 
<body>
<div id="container">
<div id="top">
<div id="tabs">
<a class="tab"  href='#'><img src="forums.png" alt="Forums" /></a>
<a class="tab"  href='#'><img src="information.png" alt="Information" /></a>
</div>
</div>

Open in new window

0
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 800 total points
ID: 22811687
I forgot to attach this yesterday!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>getting two images to sit side by side with no gap - deafpanda</title>
<style type="text/css">
* {
margin:0;
padding:0
}
#container {
margin:0px auto;
width: 900px
}
#top {
background-color:#e7e2e2;
border-bottom:15px solid #ffcd05
}
#tabs {
float:right;
width:200px
}
a img {
border:none
}
.clearFix {
clear:both;
font-size:0px;
height:0px;
overflow:hidden
}
</style>
</head>
 <body>
<div id="container">
	<div id="top">
		<div id="tabs">
			<a id="forums" href='#'><img src="uk.gif" alt="Forums" /></a><a id="information" href='#'><img src="uk.gif" alt="Information" /></a>
		</div>
		<div class="clearFix"></div>
	</div>
</div>
</body>
</html>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question