SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align type in block elements to baseline

    I want to show two letters in different fonts side by side for a typography quiz I'm making. The two letters sit side-by-side using the markup sample below, but they aren't aligned on a baseline (the baseline of Verdana 'a' is lower than baseline of Garamond 'a'. Assuming that I keep the structure of two <div> elements, can I align them with css? I'm attaching a screen shot showing how I want it to look.

    Code:
    <html>
    <head>
    
    	<title>Type Test</title>
    	
    	<style type="text/css" media="screen">
    		body {
    			font-size:200px;
    		}
    		
    		#one {
    			float:left;
    			font-family:garamond;
    		}
    		
    		#two {
    			float:left;
    			font-family:verdana;
    		}
    	</style>
    </head>
    <body>
    	<div id="one">a</div>
    	<div id="two">a</div>
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You'd need to leave them as inline elements and then you can align them to the baseline as required.

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        font-size:200px;
    }
    #one {
        font-family:garamond;
        vertical-align:baseline;
    }
    #two {
        font-family:verdana;
        vertical-align:baseline;
    }
    </style>
    </head>
    <body>
    <div><span id="one">a </span> <span id="two">a</span> </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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