equivalent tr of CSS?

Question

How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance here's a link of picture shot:

CSS

/* because of the * default code it takes out all margin and padding */
* {
    margin: 0px;
    padding: 0px;
}
#container {
    display: table;
}
#row {
    display: table-row;
}
#left, #right, #middle {
    display: table-cell;
}
#row {
    display: table-row;
}
#left, #right, #middle {
    display: table-cell;
}
body {
    font-family: verdana;
    font-size: 10px;
    background-color: ABC;
    padding: 50px;
    margin: auto;
}
h1 {
    text-align: center;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
    position: relative;
}
li + li {
    border-left: 1px solid #ccc;
}
a {
    display: block;
    padding: 7px 10px;
    color: #222;  /*changes the color of all item font color in menu bar */
    background: #eee; /*changes the background color of Menu bar */
    text-decoration: none;
}
a:hover {
    color: #fff;
    background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
    color: #f2f75e;
    background: #0090cf;
}
/* Child Menu Styles */
.level-two {
    position: absolute;
    top: 100%;
    left: -9999px;
    width: 100px;
}
li:hover .level-two {
    left: 0;
}
.level-two li {
    width: 100%;
    border: 0;
    border-top: 1px solid #ccc;
}

HTML

<h1>
  <ul class="level-one">
    <li> <a href="#">Home</a> </li>
    <li> <a href="#">Drops</a>
      <ul class="level-two">
        <li> <a href="#">One</a> </li>
        <li> <a href="#">Two</a> </li>
        <li> <a href="#">Three</a> </li>
      </ul>
    </li>
    <li> <a href="#">Contact</a> </li>
  </ul>
  </div>
  <div id="container">
    <div id="row">
      <div id="left">
        <h4>Left Col</h4>
        <p>...</p>
      </div>
      <div id="middle">
        <h4>Middle Col</h4>
        <p>...</p>
      </div>
      <div id="right">
        <h4>Right Col</h4>
        <p>...</p>
      </div>
    </div>
  </div>
</h1>

Can you add some more context about what you are trying to accomplish? It sounds like you need to start using floats rather than table-style display... — robooneus, Aug 19 '13 at 12:17

Falguni Panchal · Accepted Answer · 2013-08-19T12:41:02.387

2

add clearfix class on both of .

DEMO

.clearfix{
clear:both;
}

DEMO1

edited Aug 19 '13 at 12:41

answered Aug 19 '13 at 12:20

Falguni Panchal

8,873
3
27
33

clear: both means newline? another question how do you extend the menu bar to fit the width? to be able to get a layout like this? link file shot picture: http://postimg.org/image/f7rze5wuv/ – Daryl Aug 19 '13 at 12:29
OMG you are superb, this is a lot better, but i can't understand it, i'm going to try to understand. I'll vote for your answer :) Kudos – Daryl Aug 19 '13 at 12:51
How do you stretch the menu bar to align with the body? http://s23.postimg.org/4isztvn2z/zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.png – Daryl Aug 19 '13 at 12:57

score 2 · Answer 2 · edited May 23 '17 at 11:49

One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :

.level-one {
    /* trigger block formatting context to contain floats. */
    overflow: hidden; 
}

Demo at http://jsfiddle.net/mrYdV/1/

Here is a list of other property/value pairs that trigger block formatting context

W3C specification

Bulletproof backwards-compatible version

There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?

Niklas · Answer 3 · 2013-08-19T12:37:33.950

1

The clear property will do this for you. You can add it to your #container for example:

#container {
    display: table;
    clear:both;
}

Clear means something like:

clear all elements on both sides of this element

edited Aug 19 '13 at 12:37

answered Aug 19 '13 at 12:20

Niklas

13,005
23
79
119

clear: both means newline? another question how do you extend the menu bar to fit the width? to be able to get a layout like this? link file shot picture: http://s23.postimg.org/mazuts2aj/zzzzzzzz.png – Daryl Aug 19 '13 at 12:25
You could try working around with *width: 100%;* but I really think you should post this question as a new one. – Niklas Aug 19 '13 at 12:39

equivalent tr of CSS?

3 Answers3