I have no idea why my div element is not following normal document flow

Question

I am having issues with the document flow when floating a div to the left and another div to the right.

Both divs left and right are aligned perfectly horizontally with one another. (Menu Item name and menu item price)

However the following Menu Category Name (Burgers) and Menu Category description is starts all the way on the top. Right below the first Menu Category (Breakfast)

I have set Menu Item Name Div to float left and clear left. I did the same with menu item price, but instead I floated right and clear right.

The "Burgers" category and its description needs to show below the last menu item name and price which is. "Oatmeal 3.50"

Doesn't the burgers category needs to follow normal document flow when clearing broth divs?

I have tried changing the .menu_item_name css to display as inline_block , that solved the issue but the menu prices wouldn't line up with the menu items.

Can you guys please help me resolve this issue? I would much appreciate it.

Below is a link to a js fiddle example.

http://jsfiddle.net/eldan88/NkH74/

<style>
    #menu_container {
    width: 750px;
    margin-left: auto;
    margin-right: auto;

    }

    #menu_left_wrapper {
    width: 350px;
    float: left;
    clear: left;
    padding-right: 25px;
    border-right:thick solid #ff0000;
    }

    #menu_right_wrapper {
    width: 350px;
    float: right;
    clear: right;

    }

    .menu_item_name a {
       float: left;
        clear: left;
    }

    .menu_item_price {
    float: right;
    clear: right;
    }

</style>

HTML:

<div id='menu_left_wrapper'>
    <div class='menu_category'>Breakfast</div>
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  H&H Bagel  </a>
    </div>
    <div class='menu_item_price'>
        1.00<img class='item_image' src='21404.jpg' width='15px' height='15' />
    </div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  One Egg Sandwich  </a>
    </div>
    <div class='menu_item_price'>1.75</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Breakfast Platter  </a>
    </div>
    <div class='menu_item_price'>4.25</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Create your own egg sandwich  </a>
    </div>
    <div class='menu_item_price'>3.25</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Two Pancakes and Two Eggs  </a>
    </div>
    <div class='menu_item_price'>4.75</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Oatmeal </a>
    </div>
    <div class='menu_item_price'>3.50</div> 
    <div class='menu_category'>Burgers</div>

    Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request

    <div class='menu_category'>Mexican Quesadillas</div>
    <div class='menu_category'>Salad    </div>
    <div class='menu_category'>Cold Beverages</div>
</div>

Why don't you simply remove anything from `.menu_item_name a {` ? http://jsfiddle.net/NkH74/1/ — Roko C. Buljan, Jul 20 '14 at 22:30
Because the menu_item_name div tag will not align with menu_item_price — user3790981, Jul 20 '14 at 22:32
Gotcha but than what you're doing is wrong. both description and price should be inside a common parent. — Roko C. Buljan, Jul 20 '14 at 22:34

score 1 · Accepted Answer · answered Jul 20 '14 at 22:39

1

This is all you need: http://jsfiddle.net/NkH74/2/

<div class='menu_item_name'>
    <a href='/menus/item-detail.php'>  H&amp;H Bagel  </a>
    <span class="menu_item_price">1.00</span>
</div>

#menu_left_wrapper {
     width: 350px;
     padding-right: 25px;
     border-right:thick solid #ff0000;
 }
 .menu_item_name span{
     float:right;
 }

really.

What I did is I used a common parent for both the link and price.

answered Jul 20 '14 at 22:39

Roko C. Buljan

196,159
39
305
313

Roko. Thanks a lot dude. That's exactly what I am going to do. – user3790981 Jul 20 '14 at 22:58

score 0 · Answer 2 · answered Jul 20 '14 at 22:32

0

Try inserting a clearing div above Menu Category Name:

<div class="clr"></div>

.clr { width: 100%; height: 0; clear: both; }

answered Jul 20 '14 at 22:32

RuZ

77
9

score 0 · Answer 3 · answered Jul 20 '14 at 22:38

simply you can insert a new div with clear before the Burgers Category

<div id='menu_left_wrapper'><div class='menu_category'>Breakfast</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' >  H&H Bagel  </a></div><div class='menu_item_price'>1.00<img class='item_image' src='21404.jpg' width='15px' height='15' /></div> 
<div class='menu_item_name'><a href='/menus/item-detail.php' >  One Egg Sandwich  </a></div><div class='menu_item_price'>1.75</div> 
<div class='menu_item_name'><a href='/menus/item-detail.php' >  Breakfast Platter  </a></div><div class='menu_item_price'>4.25</div> 
<div class='menu_item_name'><a href='/menus/item-detail.php' >  Create your own egg sandwich  </a></div><div class='menu_item_price'>3.25</div> 
<div class='menu_item_name'><a href='/menus/item-detail.php' >  Two Pancakes and Two Eggs  </a></div><div class='menu_item_price'>4.75</div> 
<div class='menu_item_name'><a href='/menus/item-detail.php' >  Oatmeal </a></div><div class='menu_item_price'>3.50</div> 
    <div style="clear: both;"></div>
<div class='menu_category'>Burgers</div>
Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request
<div class='menu_category'>Mexican Quesadillas</div>
<div class='menu_category'>Salad    </div>
<div class='menu_category'>Cold Beverages</div>
</div>

score 0 · Answer 4 · edited May 23 '17 at 11:50

I updated your fiddle and I think everything lines up as expected. It's not elegant but it works.

http://jsfiddle.net/mlnmln/WG5TK/2/

CSS:

.menu_item_name {
  float: left;
  clear: left;
}

.menu_item_price {
  text-align: right;
}

Doesn't the burgers category needs to follow normal document flow when clearing broth divs?

The burger category itself doesn't follow normal document flow because you need to clear after an element, not within it to restore normal flow.

Bonus points: As others have stated it would probably be better to wrap .menu_item_name and .menu_item_price in a parent element and apply a clearfix.(What methods of ‘clearfix’ can I use?).

I have no idea why my div element is not following normal document flow

4 Answers4