Reputation: 1758
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
Reputation: 897
.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
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
Reputation: 94
Using <table>
,<td>
,<tbody>
,<thead>
and more.
Read: http://www.w3schools.com/html/html_tables.asp
Upvotes: 0