Css div width problem

Question

i have div with 500px width which contains multiple anchors... problem anchors not wrapping in to multiple lines.... i tried using table as well same problem....

<div  style="width:500px;">
    <a href="#procrit">procrit</a>&nbsp;
    <a href="#doxil">doxil</a>&nbsp;
    <a href="#prezista">prezista</a>&nbsp;
    <a href="#simponi">simponi</a>&nbsp;
    <a href="#reopro">reopro</a>&nbsp;
    <a href="#topamax">topamax</a>&nbsp;
    <a href="#invega">invega</a>&nbsp;
    <a href="#axert">axert</a>&nbsp;
    <a href="#aciphex">aciphex</a>&nbsp;
    <a href="#concerta">concerta</a>&nbsp;
    <a href="#risperdal">risperdal</a>&nbsp;
    <a href="#remicade">remicade</a>&nbsp;
    <a href="#velcade">velcade</a>&nbsp;
    <a href="#doxil">doxil</a>&nbsp;
    <a href="#regranex">regranex</a>&nbsp;
    <a href="#nucynta">nucynta</a>&nbsp;
    <a href="#duragesic">duragesic</a>&nbsp;
    <a href="#leustatin">leustatin</a>&nbsp;
    <a href="#invega">invega</a>&nbsp;
    <a href="#sustenna">sustenna</a>&nbsp;
    <a href="#reminyl">reminyl</a>&nbsp;
    <a href="#natrecor">natrecor</a>&nbsp;
</div>

You need to format your HTML as code by indenting it with four spaces. You will then be able to use <a> tags. Also, please add newlines. — SLaks
– SLaks, Commented Nov 3, 2010 at 2:37
i don't want every anchor in new line... after exceeding specified width it must come in the next row... — Rajesh
– Rajesh, Commented Nov 3, 2010 at 2:38
You should add newlines to your code so that people can read it. — SLaks
– SLaks, Commented Nov 3, 2010 at 2:45
edited for readability - acknowledged that it should be single line for purposes stated — Darko
– Darko, Commented Nov 3, 2010 at 3:13

jacrough · Accepted Answer · 2010-11-03 02:56:46Z

6

Try replacing   with just a space character.   prevents the browser from wrapping words it is attached to. Each <a> will not appear on a new line, but it will successfully wrap if it no longer fits its container if using normal spaces.

edited Nov 3, 2010 at 2:56

answered Nov 3, 2010 at 2:43

jacrough

1683 bronze badges

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

Comments

Jason McCreary · Accepted Answer · 2010-11-03 02:43:32Z

1

If there is no white-space between the anchors, it is considered all one string and therefore can not wrap. You could try to use the CSS rule word-wrap to help with this, but some browsers may not honor such a setting.

Simple solution is to change   to an actual spaces. Or use a <ul> and have the <li> display: inline;. The latter is arguably more semantic.

edited Nov 3, 2010 at 2:43

answered Nov 3, 2010 at 2:37

Jason McCreary

73.3k23 gold badges140 silver badges177 bronze badges

2 Comments

Rajesh Over a year ago

that's the reason i added  

Jason McCreary Over a year ago

  is a non-breaking space and therefore still doesn't break.

Ben · Accepted Answer · 2010-11-03 02:55:26Z

0

Use float:left;margin-right:5px

  is a naughty way to force spacing; you'll get much more consistent and professional results with good CSS (in this case, margin).

answered Nov 3, 2010 at 2:55

Ben

57.6k50 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

Css div width problem

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related