Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical layout with CSS without using breaking elements?

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?

like image 610
Danubian Sailor Avatar asked Feb 13 '13 12:02

Danubian Sailor


People also ask

What are the 3 overall approaches to CSS layout?

CSS layout types: Fixed, Elastic, and Fluid.

How do I keep elements side by side in CSS?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do I keep a div on the same line?

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.


1 Answers

Display anchor tags as block elements.

#menu a {
display: block;
}
like image 65
KBN Avatar answered Sep 21 '22 17:09

KBN