Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2008-10-26
5
1,311 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 100 total points
ID: 22807331
.img {padding:0px}
0
 
LVL 30

Assisted Solution

by:Steggs
Steggs earned 200 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 100 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 100 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:Steggs
Steggs earned 200 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 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