...

View Full Version : Align divs horizontally



dantra
12-09-2006, 10: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?



<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



#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, 10:51 PM
Hello dantra,
Did you try floating them?
Like this


<!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, 11:00 PM
And even simpler...since small code is always good:


<!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, 11:09 PM
oops, forgot your styling the link a:

Add this to the CSS


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

dantra
12-12-2006, 06: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum