CODEWITHSUNDEEP
htmlcssmultiple-columns
Taco de Wolff
Taco de Wolff

Reputation: 1758

HTML CSS make columns of text rows (br)

I have a HTML setup of the following:

<p class="vcard contact" role="contentinfo">
 <a class="org url organization-name" href="url" title="organization">organization</a><br>
 <span class="fn">name</span><br>
 <a class="tel" href="tel:tel">tel</a><br>
 <a class="email" href="mailto:email">email</a>
</p>

What CSS would I apply to make this columned? Organization and name on the left and tel and email on the right for example.

I could change the HTML, but I want it to be modular and keep HTML and CSS strictly separated.

Upvotes: 0

Views: 885

Answers (4)

mfadel
mfadel

Reputation: 897

http://jsfiddle.net/DzucC/4/

.col1 { float:left; } .col2 {  float:left;
    margin-left:15px; }

<div>
    <div class="vcard contact col1" role="contentinfo">
     <a class="org url organization-name" href="url" title="organization">organization</a>  <br>
     <span class="fn">name</span><br>
    </div>
    <div class="col2">
        <a class="tel" href="tel:tel">     tel</a><br>
        <a class="email" href="mailto:email">email</a>
    </div> </div>

Upvotes: 0

mickadoo
mickadoo

Reputation: 3483

Do you just mean how to make columns? You could change the order a little and make all elements blocks, then float them so each element inside vcard takes up 50% width.

Removing the line breaks would also make it easier to manipulate with css

.vcard a, .vcard .fn {
    display : block;
    float : left;
    width : 50%;
}

http://jsfiddle.net/mickadoo/zSytv/

Upvotes: 1

Tommie Michael Lagerroos
Tommie Michael Lagerroos

Reputation: 94

Using <table>,<td>,<tbody>,<thead> and more. Read: http://www.w3schools.com/html/html_tables.asp

Upvotes: 0

Alex Art.
Alex Art.

Reputation: 8781

Check this fiddle

.vcard
{
    position:relative;
}

.organization-name
{
    position:absolute;
    top:0;
    left:0;
}

.fn
{
    position:absolute;
    top:20px;
    left:0;
}

.tel
{
    position:absolute;
    top:0;
    left:50%;
}

.email
{
    position:absolute;
    top:20px;
    left:50%;
}

Upvotes: 1

Related Questions