Solved

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

Posted on 2008-10-26
5
1,309 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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

803 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