How can I make columns using SPAN in CSS?

Question

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?

CarlosB · Accepted Answer · 2013-06-25 18:33:25Z

3

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;

edited Jun 25, 2013 at 18:33

user1040049

answered Jun 25, 2013 at 11:04

CarlosB

914 bronze badges

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

2 Comments

Adam Tribe Over a year ago

Thanks for quick response! If so, there is no other way to wrap two columns using an anchor link? I want to make two columns in a link.

CarlosB Over a year ago

<a><div class="col1"></div><div class="col2"></div></a> works fine i guess =)

Marc Lloyd · Accepted Answer · 2013-06-25 11:02:39Z

2

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

<a href="">
    <div>

    </div>
<a>

answered Jun 25, 2013 at 11:02

Marc Lloyd

3041 silver badge7 bronze badges

1 Comment

Adam Tribe Over a year ago

thanks for quick response! I code for HTML4. (and DIV is block-level element, I cant wrap it with inline anchor element.)

maqjav · Accepted Answer · 2013-06-25 11:09:36Z

0

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

answered Jun 25, 2013 at 11:09

maqjav

2,4544 gold badges26 silver badges40 bronze badges

1 Comment

Adam Tribe Over a year ago

Yours best! Thanks again for your efforts! Have a great day!

Elanchezhian Narayanasamy · Accepted Answer · 2013-06-25 11:17:20Z

0

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>

answered Jun 25, 2013 at 11:17

Elanchezhian Narayanasamy

1,2641 gold badge18 silver badges31 bronze badges

1 Comment

Adam Tribe Over a year ago

works similar i expect... Thanks again for your efforts! Have a great day!

Jérôme Beau · Accepted Answer · 2018-08-01 08:14:21Z

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

Collectives™ on Stack Overflow

How can I make columns using SPAN in CSS?

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related