CODEWITHSUNDEEP
htmlcssmarkdownpandoc
Rook
Rook

Reputation: 62598

Is it possible to left/right align text via table in markdown?

What I'm trying to accomplish is this:

Name Surname                                                      Phone: 123
Joe Cool                                                          Fax: 123
Charlie Brown                                                     Email: 123

Some more text goes here, after these two introductory columns. Normal text just  
keeps going, and going, and going ...

that is to align the right column of text? Is it possible to make that via Markdown, or maybe via HTML or CSS tables, but in such a way that a table border isn't visible?

Upvotes: 1

Views: 1500

Answers (1)

w3uiguru
w3uiguru

Reputation: 5895

Here the HTML and CSS as per your question.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
.panel-inside { 
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
} 

.row                                   
{
    height: 30px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    font-size: 12pt;
    display:inline;    
    float:left;
    margin-left:5px;
    width:200px;
}

.label-right
{
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    margin-right:7px;  
    width:200px;
}

.listSeparator                
{
    clear:both;
    height:0;
}

</style>
</head>

<body>

<div class="panel-inside">
    <div class="row">
        <div class="label">Name Surname </div>
        <div class="label-right">Phone: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Joe Cool</div>
        <div class="label-right">Fax: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Charlie Brown</div>
        <div class="label-right">Email: 123</div>
    </div>
</div>
<div id="content">
    <p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ...
</p>
</div>

</body>
</html>

For output here is the fiddle: http://jsfiddle.net/LsGSc/

Upvotes: 1

Related Questions