PDA

View Full Version : Align divs horizontally



dantra
Dec 9th, 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
Dec 9th, 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
Dec 9th, 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
Dec 9th, 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
Dec 12th, 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