Vertical layout with CSS without using breaking elements?

Question

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?

Solution 1

Display anchor tags as block elements.

#menu a {
display: block;
}

Solution 2

Do you mean something like this?

http://jsfiddle.net/7Y9jS/

#menu {
    width: 300px;
}

#menu a {
    display: block;
    background: #ccc;
    color: #000;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 2px;
}


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

Solution 3

set display block to a

#menu a {
    display: block;
}

Solution 4

use float left

#menu a {
    float:left;
}

and then add the class group to your #menu

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

View more solutions

Comments

[Danubian Sailor]

It's so simple, I can't believe I couldn't google it searching for vertical positioning using CSS only...