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


Tags: html,css,css3,layout,multiple-columns

Problem :

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-->



Solution :

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

    CSS Howto..

    How to have only one page in a rails project be linked to a certain stylesheet?

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    How to make pull right display properly?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    jQuery - How to improve the logic for toggling inline css and class name while clicking activated buttons and hovering non-activated buttons?

    How to horizontally center absolute text?

    How do I align this icon while having the input take 100% width?

    How to dynamically adapt the layout by using only CSS

    How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

    How can I show a loading screen while a really large image is loading?

    How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

    How to hide a part of a CSS borderline nicely

    How do I use this CSS animation in my HTML file?

    How to change table width using css

    how to make the position of div is fixed even though it's empty?

    How can I achieve a jQuery onhover effect like WordPress post list's edit links?

    How to make a div to fit all available width even hidden with scroll?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    CSS how to get a div to the right side and a div exactly in the middle?

    How to fill width with flex boxes

    How to set the styles on “*” and pseudo states with JavaScript? [closed]

    What is the best CSS trick to reduce how much HTML you need?

    How to override default Polymer CSS

    How to change css rules of external stylesheet [duplicate]

    How to order properties in a declaration block? [closed]

    How to separate settings and css in a less?

    How to achieve following graphics via css

    CSS: How to make a span link to expand?