Alignment of tables side by side

Asked

Viewed 1,481 times

0

I have these four tables, but I have a big problem that I can not solve. The fourth table is below the others and not next

.price-page {
    background: none;
    margin-bottom: 130px;
}

.container {
    width: 970px;
}

.container {
    width: 750px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.col-md-4, .col-md-10 {
    float: left;
}

.col-md-4, .col-md-10 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.text-center {
    text-align: center;
}

.price .pricing-switcher {
    margin-bottom: 30px;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.price .btn:first-child {
    border-radius: 5px;
}

.price .pricing-switcher .btn {
    background-color: white;
    color: #0076BC;
    border: none;
}

.price .pricing-switcher .btn {
    padding: 6px 10px;
}

.btn:hover.btn-info, .btn:focus.btn-info, .btn.focus.btn-info, .btn:active.btn-info, .btn.active.btn-info {
    color: #7f858f;
    border-color: #e8e9ed;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}

.btn-group>.btn:hover, .btn-group-vertical>.btn:hover, .btn-group>.btn:focus, .btn-group-vertical>.btn:focus, .btn-group>.btn:active, .btn-group-vertical>.btn:active, .btn-group>.btn.active, .btn-group-vertical>.btn.active {
    z-index: 2;
}

.btn.btn-info {
    color: #2b2e33;
}

.btn:active, .btn.active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-group>.btn, .btn-group-vertical>.btn {
    position: relative;
    float: left;
}

.btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
    background-image: none;
}

.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
    color: #2b2e33;
    background-color: rgba(26,26,26,0);
    border-color: #c6c9d2;
}

.btn:active, .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-info {
    background-color: white;
}

.btn-info {
    color: #2b2e33;
    background-color: transparent;
    border-color: #e8e9ed;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 9px 20px;
    font-size: 14px;
    line-height: 2.14285714;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label {
    font-weight: 400;
    margin-bottom: .7em;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.price .pricing-switcher .btn:last-child {
    border-radius: 0 50% 50% 0;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
    margin-left: -1px;
}

.col-md-offset-1 {
    margin-left: 8.33333333%;
}

.col-md-10 {
    width: 83.33333333%;
}

.col-md-4 {
    width: 33.33333333%;
}

.price .cd-pricing-wrapper {
    position: relative;
}

ul {
    padding-left: 0;
    list-style: none;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 14.5px;
}

.panel-default.lite {
    border-color: #6aa7ec;
}

.panel {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.panel-default {
    border-color: #e8e9ed;
}

.panel {
    margin-bottom: 29px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.price .panel-price .panel-heading {
    padding: 35px 0 20px;
}

.precos>div ul li>div:first-child {
    background-color: #f1f7ff;
}

.panel-default>.panel-heading {
    color: #7f858f;
    background-color: #fff;
    border-color: #e8e9ed;
}

.precos>div ul li>div {
    background-color: white;
}

.panel-heading {
    padding: 20px 30px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.panel-heading .nome-plano {
    font-size: 25px;
}

.blue {
    color: #0076bc;
}

.price .panel-price .panel-heading .currency {
    vertical-align: text-top;
    font-size: 18px;
}

.price .panel-price .panel-heading .currency, .price .panel-price .panel-heading .period {
    color: #c8c9cc;
    font-size: 14px;
    font-weight: 400;
}

.price .panel-price .panel-heading .period {
    vertical-align: sub;
}

a {
    color: #7f858f;
    text-decoration: none;
}

a {
    background-color: transparent;
}

.price .panel-price .panel-body {
    padding: 20px 20px;
}

.panel-body {
    padding: 10px 30px 20px;
}

ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}

ul.list-styled.list-style-ok li.texto {
    line-height: 41px;
    color: #777;
}

ul.list-styled li {
    margin: 14px 0;
}

.price .cd-pricing-wrapper .is-hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

ul.list-styled li.disabled {
    color: #c8c9cc;
}

.price .cd-pricing-wrapper.panel-highlited .panel {
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
    box-shadow: 0 1px 10px rgba(0,0,0,.1);
}

p {
    margin: 0 0 2.14em;
}

p {
    margin: 0 0 14.5px;
}

[data-toggle="buttons"]>.btn input[type="radio"], [data-toggle="buttons"]>.btn-group>.btn input[type="radio"], [data-toggle="buttons"]>.btn input[type="checkbox"], [data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input, button, select, textarea {
    font-family: Open Sans;
    font-size: inherit;
    line-height: inherit;
}

input {
    line-height: normal;
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

ul.list-styled li.vip {
    color: #fb7f00;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styleum.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>

<body>
<section class="price price-page" id="pricing">
            <div class="container">	
                <div class="cd-pricing-container">
                    <div class="cd-pricing-list cd-bounce-invert  precos">
                        <div class="row precos col-md-10 col-md-offset-1">
                        	
                        	<div class="col-md-4 ">
	                            <ul class="cd-pricing-wrapper">
	                                <li class="panel panel-price panel-default lite is-visible">
	                                    <div class="panel-heading  text-center">
	                                        <div class="nome-plano  blue">1 Starter</div>
	                                        <h2><span class="currency">€ </span>9 900<sup>,00</sup><span class="period"> por cliente</span></h2>
	                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
	                                    </div>
	                                        <div class="panel-body text-center">
	                                            <ul class="list-styled list-style-ok">
	                                            	<li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
														  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP40 Training
													</li>
		                                        </ul><!--list-styled lis-styled-ok-->
	                                        </div><!--panel-body text-center-->
	                                </li><!--panel panel-price panel-default lite is-visible-->
	                            </ul><!--cd-pricing-wrapper-->
							</div><!--col-md-4-->

							<div class="col-md-4 ">
	                            <ul class="cd-pricing-wrapper panel-highlited">
	                                <li class="panel panel-price panel-default lite is-visible">
	                                    <div class="panel-heading  text-center">
	                                        <div class="nome-plano  blue">2 Production Basics</div>
	                                        <h2><span class="currency">€ </span>17 650<sup>,00</sup><span class="period"> por cliente</span></h2>
	                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
	                                    </div>
	                                    <div class="panel-body text-center">
	                                        <ul class="list-styled list-style-ok">
	                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO Cutting Optimization Drawings<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP60 Training
												</li>
		                                    </ul><!--list-styled list-styled-ok-->
	                                    </div><!--panel-body text-center-->
	                                </li><!--panel panel-price panel-default lite is-visible-->
	                            </ul><!--cd-pricing-wrapper panel-highlited-->
	                         </div><!--col-md-4-->
	                                        
					        <div class="col-md-4">
	                            <ul class="cd-pricing-wrapper panel-highlited">
	                                <li class="panel panel-price panel-default lite is-visible">
	                                    <div class="panel-heading  text-center">
	                                        <div class="nome-plano  blue">3 Production Machines</div>
	                                        <h2><span class="currency">€ </span>21 620<sup>,00</sup><span class="period"> por cliente</span></h2>
	                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
	                                    </div>
	                                    <div class="panel-body text-center">
	                                        <ul class="list-styled list-style-ok">
	                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12b CNC Machine's Comunication<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP80 Training
												</li>
											</ul><!--list-styled list-styled-ok-->
	                                    </div><!--panel-body text-center-->
	                                </li><!--panel panel-price panel-default lite is-visible-->
	                            </ul><!--cd-pricing-wrapper panel-highlited-->
	                        </div><!--col-md-4-->

	                        <div class="col-md-4">
	                            <ul class="cd-pricing-wrapper panel-highlited">
	                                <li class="panel panel-price panel-default lite is-visible">
	                                    <div class="panel-heading  text-center">
	                                        <div class="nome-plano  blue">4 Production Complete</div>
	                                        <h2><span class="currency">€ </span>35 090<sup>,00</sup><span class="period"> por cliente</span></h2>
	                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
	                                    </div>
	                                    <div class="panel-body text-center">
	                                        <ul class="list-styled list-style-ok">
	                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M03 Auto Item Generation<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M10 Package Optimization<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M11 Group Different Order's Components<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12b CNC Machine's Comunication<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Psmart Shop Floor Control<p></p>
																  <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP120 Training
												</li>
											</ul><!--list-styled list-styled-ok-->
	                                    </div><!--panel-body text-center-->
	                                </li><!--panel panel-price panel-default lite is-visible-->
	                            </ul><!--cd-pricing-wrapper panel-highlited-->
	                        </div><!--col-md-4-->
                        </div><!--row-->			
                    </div><!--cd-pricing-list cd-bounce-invert  precos-->
                </div> <!-- .cd-pricing-container -->
            </div><!--container-->
        </section>
</body>
</html>

  • You are using the CSS class col-md-4 within an element with class col-md-10. You know what that means?

  • @Andersoncarloswoss apparently can’t help me?

  • These are classes that are part of the Bootstrap grid system. It might be interesting to study it before trying to use it. There’s something about the documentation officer.

1 answer

1


<section class="price price-page" id="pricing">
        <div class="container"> 
            <div class="cd-pricing-container">
                <div class="cd-pricing-list cd-bounce-invert  precos">
                    <div class="row precos">

                        <div class="col-md-3 ">
                            <ul class="cd-pricing-wrapper">
                                <li class="panel panel-price panel-default lite is-visible">
                                    <div class="panel-heading  text-center">
                                        <div class="nome-plano  blue">1 Starter</div>
                                        <h2><span class="currency">€ </span>9 900<sup>,00</sup><span class="period"> por cliente</span></h2>
                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
                                    </div>
                                        <div class="panel-body text-center">
                                            <ul class="list-styled list-style-ok">
                                                <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
                                                      <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP40 Training
                                                </li>
                                            </ul><!--list-styled lis-styled-ok-->
                                        </div><!--panel-body text-center-->
                                </li><!--panel panel-price panel-default lite is-visible-->
                            </ul><!--cd-pricing-wrapper-->
                        </div><!--col-md-3-->

                        <div class="col-md-3 ">
                            <ul class="cd-pricing-wrapper panel-highlited">
                                <li class="panel panel-price panel-default lite is-visible">
                                    <div class="panel-heading  text-center">
                                        <div class="nome-plano  blue">2 Production Basics</div>
                                        <h2><span class="currency">€ </span>17 650<sup>,00</sup><span class="period"> por cliente</span></h2>
                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
                                    </div>
                                    <div class="panel-body text-center">
                                        <ul class="list-styled list-style-ok">
                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO Cutting Optimization Drawings<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP60 Training
                                            </li>
                                        </ul><!--list-styled list-styled-ok-->
                                    </div><!--panel-body text-center-->
                                </li><!--panel panel-price panel-default lite is-visible-->
                            </ul><!--cd-pricing-wrapper panel-highlited-->
                         </div><!--col-md-3-->

                        <div class="col-md-3">
                            <ul class="cd-pricing-wrapper panel-highlited">
                                <li class="panel panel-price panel-default lite is-visible">
                                    <div class="panel-heading  text-center">
                                        <div class="nome-plano  blue">3 Production Machines</div>
                                        <h2><span class="currency">€ </span>21 620<sup>,00</sup><span class="period"> por cliente</span></h2>
                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
                                    </div>
                                    <div class="panel-body text-center">
                                        <ul class="list-styled list-style-ok">
                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12b CNC Machine's Comunication<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP80 Training
                                            </li>
                                        </ul><!--list-styled list-styled-ok-->
                                    </div><!--panel-body text-center-->
                                </li><!--panel panel-price panel-default lite is-visible-->
                            </ul><!--cd-pricing-wrapper panel-highlited-->
                        </div><!--col-md-3-->

                        <div class="col-md-3">
                            <ul class="cd-pricing-wrapper panel-highlited">
                                <li class="panel panel-price panel-default lite is-visible">
                                    <div class="panel-heading  text-center">
                                        <div class="nome-plano  blue">4 Production Complete</div>
                                        <h2><span class="currency">€ </span>35 090<sup>,00</sup><span class="period"> por cliente</span></h2>
                                        <a class="btn btn-info" href="eu-quero">Comprar</a>
                                    </div>
                                    <div class="panel-body text-center">
                                        <ul class="list-styled list-style-ok">
                                            <li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Base Package<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M03 Auto Item Generation<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M10 Package Optimization<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M11 Group Different Order's Components<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12a Technical Drawings<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M12b CNC Machine's Comunication<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> M13 BOM<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> Psmart Shop Floor Control<p></p>
                                                              <img src="http://i66.tinypic.com/24g3sdd.png" border="0"> SP120 Training
                                            </li>
                                        </ul><!--list-styled list-styled-ok-->
                                    </div><!--panel-body text-center-->
                                </li><!--panel panel-price panel-default lite is-visible-->
                            </ul><!--cd-pricing-wrapper panel-highlited-->
                        </div><!--col-md-3-->
                    </div><!--row-->            
                </div><!--cd-pricing-list cd-bounce-invert  precos-->
            </div> <!-- .cd-pricing-container -->
        </div><!--container-->
    </section>

In place of col-Md-4 place col-Md-3 and remove col-Md-10 col-Md-offset-1

Browser other questions tagged

You are not signed in. Login or sign up in order to post.