Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Align divs horizontally

    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •