Solved

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

Posted on 2008-10-26
5
1,317 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
[X]
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
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

Technology Partners: 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

696 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