Solved

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

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 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 …

706 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

14 Experts available now in Live!

Get 1:1 Help Now