Align divs horizontally

dantra · 12-09-2006, 09:27 PM

Normally this wouldn’t be an issue however I seem to be overlooking something.
I would like to align the images horizontally but they align vertically.
As you can see the divs are links which works fine except for the vertical alignment.

Any suggestions on how to get the images to line up next to one another?

Code:

<div id="mylinks">

<h1>More Links</h1>

<h2>Some Of My Links</h2>

<div class="link1"><a href="http://www.mysite1.com" title="Site1" accesskey="d"></a></div>

<div class="link2"><a href="http://www.mysite2.com/site2.htm" title="Site2" accesskey="r"></a></div>

<div class="link3"><a href="http://www.mysite3.com/site3.htm" title="Site3" accesskey="m"></a></div>

</div>

CSS

Code:

#mylinks {
	display: block;
	width: 100%;
	border: none;
	margin: 0 auto;
}

.link1 {
	background: url(../images/site1.jpg) no-repeat;
	margin-top: 25px;
	margin-left: 0px;
	width: 190px;
	height: 61px;
}

.link1 a {
	display:block;
	width:100%; 
	height:100%; 
	font-size:0;
}
* html #link1 a {
	display: inline;
	display: block;
}

.link2 {
	background:url(../images/site2.jpg) no-repeat;
	margin-top: 0px;
	margin-left:0px;
	width: 190px;
	height: 61px;
}

.link2 a {
	display:block;
	width:100%; 
	height:100%; 
	font-size:0;
}

* html #link2 a {
	display: inline;
	display: block;
}

.link3 {
	background:url(../images/site3.jpg) no-repeat;
	margin-top: 0px;
	margin-left:0px;
	width: 190px;
	height: 61px;
}

.link3 a {
	display:block;
	height:61px;
	width:100%; 
	font-size:0;
}

* html #link3 a {
	display: inline;
	display: block;
}

Excavator · 12-09-2006, 09:51 PM

Hello dantra,
Did you try floating them?
Like this

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
#mylinks {
	display: block;
	width: 100%;
	border: none;
	margin: 0 auto;
}

.link1 {
	background: url(../images/site1.jpg) no-repeat;
	margin-left: 0px;
	width: 190px;
	height: 61px;
	float: left;
}

.link2 {
	background:url(../images/site2.jpg) no-repeat;
	margin-top: 0px;
	margin-left:0px;
	width: 190px;
	height: 61px;
	float: left;
}


.link3 {
	background:url(../images/site3.jpg) no-repeat;
	margin-top: 0px;
	margin-left:0px;
	width: 190px;
	height: 61px;
	float: left;
}
       

</style>
</head>

<body>
<div id="mylinks">

<h1>More Links</h1>

<h2>Some Of My Links</h2>

<div class="link1"><a href="http://www.mysite2.com/site1.htm">My site</a></div>

<div class="link2"><a href="http://www.mysite2.com/site2.htm">Link 2</a></div>

<div class="link3"><a href="http://www.mysite3.com/site3.htm">Link 3</a></div>

</div>
</body>
</html>

Excavator · 12-09-2006, 10:00 PM

And even simpler...since small code is always good:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
#mylinks {	
	width: 100%;	
}
.link {
	margin-left: 0px;
	width: 190px;
	height: 61px;
	float: left;
}
#link1{
	background: url(../images/site1.jpg) no-repeat;
}
#link2{
	background: url(../images/site2.jpg) no-repeat;
}
#link3{
	background: url(../images/site3.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="mylinks">
<h1>More Links</h1>
<h2>Some Of My Links</h2>
<div class="link" id="link1"><a href="http://www.mysite2.com/site1.htm">My site</a></div>
<div class="link" id="link2"><a href="http://www.mysite2.com/site2.htm">Link 2</a></div>
<div class="link" id="link3"><a href="http://www.mysite3.com/site3.htm">Link 3</a></div>
</div>
</body>
</html>

Excavator · 12-09-2006, 10:09 PM

oops, forgot your styling the link a:

Add this to the CSS

Code:

.link a {
	display:block;
	width:100%; 
	height:100%; 
	font-size: 10px;
}
* html #link a {
	display: inline;
	display: block;
}

dantra · 12-12-2006, 05:50 PM

Sorry it took me so long to reply but I've been really busy.
I finally got around to trying your example and after tweaking it a bit, it worked like a charm.
Thanks