Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP:Radiobuttonlist/asp:RadioButtonListItem custom styling 1 21
Host asp.net pages 5 26
Error on link 14 40
Set email body to html using vbscript 6 28
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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)

863 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now