Vertical layout with CSS without using breaking elements?

Danubian Sailor picture Danubian Sailor · Feb 13, 2013 · Viewed 13.1k times · Source

Is it possible to implement vertical layout with CSS only, and not with HTML elements?

I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, it is placed below.

I'd like to achieve the same with CSS style settings. Is it possible?

By CSS-only I mean, we have div and its children, and do not add anything special such as:

  • line-breaking elements ( <br/>, <div style="clear:both;"/> )
  • UL tags
  • tables (yes, still used, f.g. JSF almost exclusively based on them)

So:

<div id="menu">
  <a href="something1">Page 1</a>
  <a href="something2">Page 2</a>
  <a href="something3">Page 3</a>
</div>

And CSS implementing vertical layout:

#menu { ??? }
#menu a { ??? }

Is there a ??? that I could use to achieve what I want?

Answer

KBN picture KBN · Feb 13, 2013

Display anchor tags as block elements.

#menu a {
display: block;
}