Question

I’m having trouble setting up my css to display my page correctly. I want the “DRINKS” icon to remain on the left, but i want to shift up the entire block of drink images to the right of the “DRINKS” icon.

I tried floating the drinks icon to the left, then floating the block of drink images to the left too, but it obviously didnt work.

HTML:

        <div id="drink_section">

            <img src="/{{MEDIA_URL}}images/images/drinks_order_title.png" alt="" id="drinks_order_title" />                   

            <div id="drink_menu">
                {% for item in drink %}
                    <div id="drink_set">
                        <img src="{{item.photo_menu.url}}" alt="" id="drink_photo" />
                        <img src="/{{MEDIA_URL}}images/images/drinks_title_overlay.png" alt="" id="drinks_title_overlay" />                   
                        <p id="drink_name">{{item.name}}</p> 
                        <p id="drink_price">${{item.price}}</p>

                        <div id="drink_footer">
                            <a id ="drink_order_button" href="{{item.slug}}"></a>
                        </div><!-- end drink_footer-->

                    </div><!-- end drink_set-->
                {% endfor %}
            </div><!-- end drink_menu--> 

        </div><!-- end drink_section-->  

CSS

#drink_section{
    width:755px;
    float:left;

}

#drink_menu{
    float:left;
}

#drink_title{
    float:left;
    width:128px;
}

#drink_set{
    float:left;
    width:137px;
}

Answer 1

Demo

Hi now you can change your code and used ul li list item for this design

as like this

html

<ul class="ordr">
  <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
<li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
  <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
    <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
      <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
        <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>
          <li>
  <img src="http://www.gravatar.com/avatar/772707aec2cb2ce7b372deb2d4e06b51?s=32&d=identicon&r=PG" alt="">
    <p>price tag</p>
    <a href="#">price tag</a>
  </li>

</ul>

css

.ordr{
  list-style:none;}
.ordr li{
float:left;
  background:red;
  width:100px;
  margin-left:1px;
  position:relative;
}
.ordr li img{
  width:100%;
  border:solid 1px black;}

.ordr li p{
position:absolute;
  left:0;
  top:66px;
  text-align:center;
  color:#fff;
  right:0;
  background:rgba(0,0,0,0.5)
}

Live demo