Question

I’m not full-time html person but need to get this working (like 5%). I have the following layout that looks like this:

I don’t want the price to be flush with the top and am using info here: Div collapse when using float.

I have:

.menu-item {
    border: 1px solid green;
}
.depth-1 {
    margin-left: 10px;
}

.depth-2{
  margin-left: 20px;
}

.menu-item  .info{
  width:400px;
}

.menu-item .info .header {
    border: 1px solid orange;
}

.menu-item .info .detail {
    border: 1px solid red;
}

.menu-item .price {
    float: right;
    width: 150px;
}


<div class="menu-item">
  <div class="info">
    <div class="depth-1 header">wakame-hijiki seaweed salad</div> 
    <div class="depth-1 detail">cucumber / carrot / daikon / apple  || cucumber / carrot / daikon / apple / ginger dressing || cucumber apple / ginger dressing</div> 
  </div>
  <div class="price">9.0</div>
  <div style="clear:both;height:1px;overflow:none;"></div>


</div>

How would I adjust layout to get price flush with top?

thx

Answer 1

Here is an example. I’ve use background color to show where the div are instead of stroke. Just to make sur that we keep the layout ok.

Here is a link of what you can do

http://jsfiddle.net/etienne_carre/nX2Qf/

I’ve put the info div float left an the price div as well.