Evelyn Evelyn - 1 month ago 9
CSS Question

CSS Column Help: How do I get a column within a column?

I am trying to get my CSS to look like this:

image 1

But so far I can only get it to look like this (still adding in font info and images):

image 2

How can I get it to look like it does in image 1? I am trying to use multiple columns but it's not working.



article {
font-family: "alternate-gothic-no-1-d", sans-serif;
width: 821px;
height: 791px;
margin-left: 94px;
margin-top: 127px;
}
#menu {
width: 665px;
height: 772;
column-count: 3;
}
#menumini {
width: 365px;
}
#foodplace {
width: 365px;
column-count: 2;
}

<!-- This is the menu of my website-->
<article>
<div id="menu">
<div class="menumini" alt>
<h2> BURGERS</h2>
<div class="foodplace">
<div class="Hamburger">
<img src="img/hanburger.png" alt="hamburger">
<p>Hamburger...$5.29</p>
</div>
<div class="Chesse Burger">
<img src="img/hanburger.png" alt="Chesse Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon Burger">
<img src="img/hanburger.png" alt="Bacon Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon cheese Burger">
<img src="img/hanburger.png" alt="Bacon cheese Burger">
<p>Hamburger...$5.29</p>
</div>
</div>
<!-- food place ends here-->
</div>
<!--menu mini ends-->
<div class="menumini">
<h2>little BURGERS </h2>
<div class="foodplace">
<div class="Hamburger">
<img src="img/hanburger.png" alt="hamburger">
<p>Hamburger...$5.29</p>
</div>
<div class="Chesse Burger">
<img src="img/hanburger.png" alt="Chesse Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon Burger">
<img src="img/hanburger.png" alt="Bacon Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon cheese Burger">
<img src="img/hanburger.png" alt="Bacon cheese Burger">
<p>Hamburger...$5.29</p>
</div>
</div>
<!-- food place ends here-->
</div>
<!--menu mini ends-->
<div class="menumini">
<h2>HOT DOGS </h2>
<div class="foodplace">
<div class="Hamburger">
<img src="img/hanburger.png" alt="hamburger">
<p>Hamburger...$5.29</p>
</div>
<div class="Chesse Burger">
<img src="img/hanburger.png" alt="Chesse Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon Burger">
<img src="img/hanburger.png" alt="Bacon Burger">
<p>Hamburger...$5.29</p>
</div>
<div class="Bacon cheese Burger">
<img src="img/hanburger.png" alt="Bacon cheese Burger">
<p>Hamburger...$5.29</p>
</div>
</div>
<!-- food place ends here-->
</div>
<!--menu mini ends-->




Answer

First I would adjust your HTML like so:

<div class="menumini" alt>
  <h2> BURGERS</h2>
  <div class= "foodplace">
     <div class= "burger hamburger">
        <img src="img/hanburger.png"alt="hamburger" >
        <p> Hamburger...$5.29</p>
      </div>
      <div class= "burger ChesseBurger">
        <img src="img/hanburger.png" alt="Chesse Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconBurger">
        <img src="img/hanburger.png" alt="Bacon Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconCheeseBurger">
        <img src="img/hanburger.png" alt="Bacon cheese Burger">
        <p> Hamburger...$5.29</p> 
      </div> 
  </div><!-- food place ends here-->
</div> <!--menu mini ends-->      

Then you will adjust the CSS like so:

.menumini {
  display:inline-block;
  vertical-align:top;
  width:40%;
}
.foodplace {
  display:block;
  width:100%;
  text-align:center;
}
.burger {
  display:inline-block;
  vertical-align:top;
  width:45%;
  text-align:center;
}

This will allow you to style all the burgers with one class but also allow you to make individual adjustments to a specific one by using:

.burger.CheeseBurger
Comments