HTML CSS make columns of text rows (br)

Question

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.

Maybe mark it up as an unordered list and float the list elements? Pure CSS columns are tricky at the moment, depending on what you need/want to support. — Sven
– Sven, Commented Oct 13, 2013 at 10:47

Alex Art. · Accepted Answer · 2013-10-13 10:53:28Z

1

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

answered Oct 13, 2013 at 10:53

Alex Art.

8,7813 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mickadoo · Accepted Answer · 2013-10-13 10:58:25Z

1

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/

answered Oct 13, 2013 at 10:58

mickadoo

3,5531 gold badge28 silver badges42 bronze badges

1 Comment

Taco de Wolff Over a year ago

I guess changing the order is unavoidable. Gah, if only design would be really left to CSS only...

Tommie Michael Lagerroos · Accepted Answer · 2013-10-13 10:57:01Z

0

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

answered Oct 13, 2013 at 10:57

Tommie Michael Lagerroos

948 bronze badges

Comments

mfadel · Accepted Answer · 2013-10-13 11:06:49Z

0

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>

edited Oct 13, 2013 at 11:06

answered Oct 13, 2013 at 10:56

mfadel

8971 gold badge12 silver badges33 bronze badges

Collectives™ on Stack Overflow

HTML CSS make columns of text rows (br)

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related