CODEWITHSUNDEEP
htmlcss
Adam Tribe
Adam Tribe

Reputation: 11

How can I make columns using SPAN in CSS?

I used CSS2:

.leftNav {
width:200px;
float:left;
display:inline-block;
}

.rightPara{
margin-left:210px;
}

and in HTML:

    <div>

    <a href="web.com">

    <span class="leftNav">
    <img src="bla.gif" width="40" height="40" />
    </span>

    <span class="rightPara">
    <h2>header<h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor tristique, tempus nunc quis, ornare mauris. Mauris in interdum lectus. Integer nulla ante, ultrices non vulputate vel, tincidunt in urna. Donec et congue mauris, non placerat nisl. Integer volutpat auctor erat, aliquet aliquam velit sagittis nec. Quisque pharetra aliquam tincidunt. Etiam id diam lobortis, porta nunc nec, accumsan tortor. Duis in nisi vitae eros bibendum dignissim. Sed commodo massa egestas placerat pellentesque.</p>
<p>In facilisis congue purus eget tempus. Integer a vestibulum tellus. In at orci malesuada, egestas neque quis, cursus risus. Etiam iaculis, velit id fringilla fermentum, leo nibh bibendum orci, eu facilisis risus mi ac risus. Nullam eu odio feugiat, venenatis orci vel, commodo quam. Integer in fringilla leo. Sed placerat varius facilisis. Maecenas vitae libero neque.</p>
    </span>

    </a>

    </div>

But no use! The paragraph is messed with left column.

For example, it should be like:

// ---------------------------
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// | ..... | ............... |
// ---------------------------

Why do I need in SPAN is, I want to wrap them with A (anchor) element. (DIV does not get wrapped with an inline element, like Anchor).

If it is not possible, guide me to make two columns as a link? In other words, two columns' contents should be wrapped by a link - anchor element).

Is it possible?

Upvotes: 0

Views: 2803

Answers (5)

J&#233;r&#244;me Beau
J&#233;r&#244;me Beau

Reputation: 11460

Just wraps your columns in an element:

<div class="columns">
  <span class="leftNav">
    <img src="bla.gif" width="40" height="40" />
  </span>
  <span class="rightPara">
    <h2>header<h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor tristique, tempus nunc quis, ornare mauris. Mauris in interdum lectus. Integer nulla ante, ultrices non vulputate vel, tincidunt in urna. Donec et congue mauris, non placerat nisl. Integer volutpat auctor erat, aliquet aliquam velit sagittis nec. Quisque pharetra aliquam tincidunt. Etiam id diam lobortis, porta nunc nec, accumsan tortor. Duis in nisi vitae eros bibendum dignissim. Sed commodo massa egestas placerat pellentesque.</p>
  </span>
</div>

Then display that wrapper as a table and each column as table cells:

.columns {
  display: table;
}
.leftNav {
   display: table-cell;
   width: 200px;
}
.rightPara {
   display: table-cell;
}

Upvotes: 0

CarlosB
CarlosB

Reputation: 91

span only occupy as much space as they need to render their content. This is true for all inline elements. It can be modified in CSS (display:block;) but it's much better to use div just like Marc Lloyd suggested and have them float:left;

Upvotes: 3

Elanchezhian Narayanasamy
Elanchezhian Narayanasamy

Reputation: 1264

I hope this is what you want..

  <div>
  <span class="leftNav" style="width: 200px; display: inline-block; vertical-align: top;">
      <img src="bla.gif" />
  </span>
  <span class="rightPara" style="display: inline-block">
    <h2>header<h2>
        <p>something something ....</p>
 </span> </div>

Upvotes: 0

maqjav
maqjav

Reputation: 2434

Here you have a posible solution: Try if yourself. However there are better solutions with DIVs.

HTML:

<div id="content">
    <span class="leftNav">
       IMG
    </span>

    <span class="rightPara">
       <h2>header</h2>
       <p>something something ....</p>
    </span>
</div>

CSS:

#content {
    width: 600px;
}

.leftNav {
    width:200px;
    float:left;
    border: 1px solid;
}

.rightPara{
    margin-left:210px;
    float:left;
    border: 1px solid;
}

Upvotes: 0

Marc Lloyd
Marc Lloyd

Reputation: 304

If you use an HTML5 doctype you can wrap block level elements with inline elements e.g.

<a href="">
    <div>

    </div>
<a>

Upvotes: 2

Related Questions