Learn, Share, Build

195
October 11, 2017, at 12:07 PM

I’ve been trying to incorporate these <div>s to line up horizontally on my website. I’ve made a template that lines up the <div>s correctly, but when I paste my price card code it doesn’t work properly together.

.outer-container { 
  margin: auto; 
  width: 100%; 
  float: left; 
} 
 
.container { 
  width: 200px; 
  height: auto; 
  box-shadow: 0 5px 10px 0px #3c385c; 
} 
 
.container2, 
.container3 { 
  margin-left: 201px; 
  float: left; 
}
<div class="outer-container"> 
 
  <div class="container container1"> 
    <div class="w-table"> 
      <div class="w-table-cell"> 
        <div class="w-container"> 
          <div class="w-card color-green"> 
            <div class="card-header"> 
              <div class="w-title" style="cursor:default"> 
                <h2> 
                  <font size="7px">Novice</font> 
                </h2> 
              </div> 
              <div class="w-price" style="cursor:default"> 
                $4.99 
                <h3>/ Week</h3> 
              </div> 
              <div class="container-button"> 
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a> 
              </div> 
            </div> 
            <div class="card-content" style="cursor:default"> 
              <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
              </div> 
              <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
              </div> 
              <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
              </div> 
            </div> 
          </div> 
        </div> 
 
        <div class="container container2"> 
          <div class="w-table"> 
            <div class="w-table-cell"> 
              <div class="w-container"> 
                <div class="w-card color-green"> 
                  <div class="card-header"> 
                    <div class="w-title" style="cursor:default"> 
                      <h2> 
                        <font size="7px">Novice</font> 
                      </h2> 
                    </div> 
                    <div class="w-price" style="cursor:default"> 
                      $4.99 
                      <h3>/ Week</h3> 
                    </div> 
                    <div class="container-button"> 
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a> 
                    </div> 
                  </div> 
                  <div class="card-content" style="cursor:default"> 
                    <div class="w-item" style="cursor:default"> 
                      <span>Weekly </span>Meal Plans 
                    </div> 
                    <div class="w-item" style="cursor:default"> 
                      <span>Personal </span>Dietary Assessment and Advice 
                    </div> 
                    <div class="w-item" style="cursor:default"> 
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
                    </div> 
                  </div> 
                </div> 
              </div> 
 
              <div class="container container3"> 
                <div class="w-table"> 
                  <div class="w-table-cell"> 
                    <div class="w-container"> 
                      <div class="w-card color-green"> 
                        <div class="card-header"> 
                          <div class="w-title" style="cursor:default"> 
                            <h2> 
                              <font size="7px">Novice</font> 
                            </h2> 
                          </div> 
                          <div class="w-price" style="cursor:default"> 
                            $4.99 
                            <h3>/ Week</h3> 
                          </div> 
                          <div class="container-button"> 
                            <a class="w-button" href="/meal-planner" target="_blank">Sign up </a> 
                          </div> 
                        </div> 
                        <div class="card-content" style="cursor:default"> 
                          <div class="w-item" style="cursor:default"> 
                            <span>Weekly </span>Meal Plans 
                          </div> 
                          <div class="w-item" style="cursor:default"> 
                            <span>Personal </span>Dietary Assessment and Advice 
                          </div> 
                          <div class="w-item" style="cursor:default"> 
                            <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
                          </div> 
                        </div> 
                      </div> 
                    </div> 
                  </div>

CodePen

Answer 1

You're missing some closing divs on each container section and also i've added a float: left to container1 which lines them up.

Codepen

css

.outer-container {
    margin: auto;
    width: 100%;
    float:left;
}
.container {
    width: 200px;
    height: auto;
    box-shadow: 0 5px 10px 0px #3c385c;
}
.container1 {
    float: left;
}
.container2, .container3 {
    margin-left: 201px;
    float: left;
}

HTML

<div class="outer-container">
      <div class="container container1">
            <div class="w-table">
            <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">
                            <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>
                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      </div>
        <div class="container container2">
            <div class="w-table">
            <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">
                  <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>
                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container container3">
            <div class="w-table">
                <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">
                  <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>
                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                  </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
Answer 2

I simplified the code and removed most of the nesting to show that you can do this very simply with display: flex; Using flex on the parent outer-container will set all of its children <div class="container"> to flex children that receive flex-direction: row as a default.

<div class="outer-container">
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
</div>

.outer-container {
  display: flex;
  padding: 20px;
}
.container {
  width: 200px;
  box-shadow: 0 5px 10px 0px #3c385c;
  padding: 10px;
}
.container:not(:last-of-type) {
  margin-right: 10px;
}
.container span {display:block;}

example pen: https://codepen.io/andrewchar/pen/verOaq?editors=1100

Answer 3
<div class="outer-container">
  <div class="container container1">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container container2">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container container3">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>

I think this is what you want. You forgot to close a couple of div tags.

Check the pen here: https://codepen.io/roshankrishnan7/pen/pWKJZP

LAST QUESTIONS
All questions
Rent Charter Buses Company
POPULAR ONLINE
jQuery Categories

PostTooLargeException in Laravel

Nodejs cannot create mySQL Database

HTML dropdown and text form, php if statement?

UI - library/implementation like the alarm clock or call alert screen

stuck with the maxsum works fine with small values but does'nt work with big values

READ ALSO
Learn, Share, Build
CSS

Learn, Share, Build

I'm relatively new to using CSS, but so far I've been doing pretty good with my codingI'm trying to design a layout for my userlookup on Neopets, since for me personally it's a good place for me to practice different coding

 238
Learn, Share, Build
CSS

Learn, Share, Build

I'm having issue with some form fields that have their values outside the field box

 282
Learn, Share, Build
CSS

Learn, Share, Build

I've had this issue for some time, but I can not figure out how to make a data driven accordion element that acts like oneI got it to expand, but I can't collapse it

 276
Learn, Share, Build
CSS

Learn, Share, Build

I'm creating a wordpress theme and both sides of the content should have diagonally borderI can solve this with pictures but this is the ugly way and the content has not the same length on every page

 209