same height on div when expanding - html

I often run into a problem, where it is taking to long for me to solve. I would like that the bootstrap boxes in the bottom have the same height. I tried to set a height in px in my css, but that messes everything up. I also tried to set it with %, but that does not work. So how is the propper way to set the height, so all of the boxes are expaning to same height, if I add some text there is gonna make the box change the height?
Portfolio
HTML (Just inserted 1 col here, so the code do not fill so much)
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
.panel-pricing {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
h3.panel-pricing {
color: #999;
font-size: 20px;
}
.panel-pricing .panel-heading {
padding: 20px 10px;
}
.panel-pricing .panel-heading .fa {
margin-top: 10px;
font-size: 58px;
}
.panel-pricing .list-group-item {
color: #777777;
border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
background-color: #f0f0f0;
font-size: 40px;
color: #777777;
padding: 20px;
margin: 0px;
}
<section id="plans">
<div class="container">
<div class="row">
<!-- item -->
<div class="col-md-4 text-center">
<div class="panel panel-danger panel-pricing">
<div class="panel-heading">
<i class="fa fa-money" aria-hidden="true"></i>
<h3>Plan 1</h3>
</div>
<div class="panel-body text-center">
<p><strong>$100 / Month</strong>
</p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
</div>
</div>
</div>
</section>

update css and add min-height
.panel-pricing .panel-body {
background-color: #f0f0f0;
font-size: 40px;
color: #777777;
padding: 20px;
margin: 0px;
min-height: 115px;
}

Related

How to style child div not relative with parent div

I want to insert a table HTML on my post.
<div class="page-section">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
{!! $post->body !!}
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
CSS for .page-section:
.page-section {
display: block;
position: relative;
overflow: hidden;
}
The code of table:
li {
list-style: none;
}
/* ------------ pricing table -------------- */
#pricing-table-section .pricing-table {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
padding: 32px 21px;
border-radius: 8px;
background: #f5f5f5;
}
#pricing-table-section .pricing-table h4 {
color: #74a534;
font-family: "Roboto", sans-serif;
margin-bottom: 25px;
}
#pricing-table-section .pricing-table .price {
padding: 22px 0;
border-top: 1px solid #e1f1ff;
/* border-bottom: 1px solid #d9d9d9; */
}
#pricing-table-section .pricing-table .price h2 {
margin-left: 20px;
position: relative;
font-family: 'Open Sans', sans-serif;
color: #000000;
}
#pricing-table-section .pricing-table .price h2 span {
font-family: "Roboto", sans-serif;
}
#pricing-table-section .pricing-table .price h2 .dollar {
font-size: 18px;
display: inline-block;
position: absolute;
/* left: -20px; */
top: 10px;
}
#pricing-table-section .pricing-table .price h2 .month {
font-size: 10px;
display: inline-block;
position: absolute;
left: 9px;
bottom: -4px;
color: #929292;
}
#media screen and (max-width: 992px) {
#pricing-table-section .pricing-table .price h2 {
margin-left: 10px;
}
}
#pricing-table-section .pricing-table .price p {
color: #929292;
}
#pricing-table-section .pricing-table ul.packages {
padding: 20px 0;
}
#pricing-table-section .pricing-table ul.packages li {
font-size: 16px;
font-weight: 400;
font-family: "Open Sans", sans-serif;
line-height: 40px;
}
#pricing-table-section .pricing-table ul.packages li i {
display: inline-block;
width: 24px;
color: #62be10;
}
#pricing-table-section .pricing-table .button {
background: #07aaa5;
color: #ffffff;
border-color: transparent;
}
/* #pricing-table-section .pricing-table .button:before {
background: #74a534;
} */
#pricing-table-section .pricing-table.black {
background: #07aaa5;
color: #ffffff;
border-color: transparent;
}
#pricing-table-section .pricing-table.black ul.packages li i,
#pricing-table-section .pricing-table.kinhdoanh ul.packages li i,
#pricing-table-section .pricing-table.coban ul.packages li i {
color: #ffffff;
}
#pricing-table-section .pricing-table.black h4,
#pricing-table-section .pricing-table.black h2,
#pricing-table-section .pricing-table.black p,
#pricing-table-section .pricing-table.black h2>.month {
color: #ffffff;
}
#pricing-table-section .pricing-table.black .button {
background: #ffffff;
color: #202125;
}
#pricing-table-section .pricing-table.black .button:before {
background: #74a534;
}
#pricing-table-section .pricing-table.black .button:hover,
#pricing-table-section .pricing-table.black .button:focus,
#pricing-table-section .pricing-table.black .button:active {
color: #ffffff;
}
#media screen and (max-width: 767px) {
#pricing-table-section .pricing-table.black {
margin: 50px 0;
}
}
#pricing-table-section .pricing-table.black:hover .button:before,
#pricing-table-section .pricing-table.coban:hover .button:before,
#pricing-table-section .pricing-table.kinhdoanh:hover .button:before {
background: #202125;
}
#pricing-table-section .pricing-table:hover .button:hover {
color: #ffffff;
}
/* ------------ pricing table end -------------- */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="pricing-table-section" class="mid-level-padding">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center ">
<div class="section-top-heading">
<h2 class="head-content">Bảng giá</h2>
<p>Tùy theo nhu cầu của bạn và chọn gói tốt nhất cho mình.</p>
</div>
</div>
</div>
<div class="row">
<div style="margin-bottom:10px;" class="col-lg-4 col-md-4 col-sm-6 col-xs-12 wow fadeInLeft animated" style="visibility: visible;">
<div class="pricing-table coban">
<div class="type">
<h4>Gói cơ bản</h4>
</div>
<div class="price">
<div class="row">
<div class="col-xs-12">
<h2>2.200.000 <span class="dollar">VNĐ</span></h2>
<span style="margin-left: 20px;">Thiết kế web theo mẫu sẵn có</span>
</div>
</div>
</div>
<div class="underline1 normal no-margin"></div>
<div class="underline2 normal no-margin"></div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i>Chọn mẫu giao diện</li>
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Miễn phí</strong> 1 hosting + tên miền</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Hỗ trợ 24/7</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Bảo hành vĩnh viễn</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Chức năng đặt hàng, thanh toán</li>
</ul>
<button class="btn button btn-block"> Xem Mẫu Web </button>
</div>
</div>
<div style="margin-bottom:10px;" class="col-lg-4 col-md-4 col-sm-6 col-xs-12 wow fadeInUp animated" data-wow-duration="3s" style="visibility: visible; animation-duration: 3s;">
<div class="pricing-table black">
<div class="type">
<h4>Gói theo yêu cầu</h4>
</div>
<div class="price">
<div class="row">
<div class="col-xs-12">
<h2>3.500.000+ <span class="dollar">VNĐ</span></h2>
<span style="margin-left: 20px;">Web giới thiệu công ty, sản phẩm.</span>
</div>
</div>
</div>
<div class="underline1 normal no-margin"></div>
<div class="underline2 normal no-margin"></div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Thiết kế web theo yêu cầu</strong></li>
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Miễn phí</strong> 1 hosting + tên miền</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Hỗ trợ 24/7</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Bảo hành vĩnh viễn</li>
<li><i class="fa fa-times" aria-hidden="true"></i>Không hỗ trợ đặt hàng, thanh toán</li>
</ul>
<button onclick="location.href='http://127.0.0.1:8000/#contact-us'" class="btn button btn-block">Đăng ký</button>
</div>
</div>
<div style="margin-bottom:10px;" class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col-md-offset-0 col-lg-offset-0 col-xs-offset-0 col-sm-offset-3 wow fadeInRight animated" style="visibility: visible;">
<div class="pricing-table kinhdoanh">
<div class="type">
<h4>Gói kinh doanh</h4>
</div>
<div class="price">
<div class="row">
<div class="col-xs-12">
<h2>4.200.000+ <span class="dollar">VNĐ</span></h2>
<span style="margin-left: 20px;">Website bán hàng.</span>
</div>
</div>
</div>
<div class="underline1 normal no-margin"></div>
<div class="underline2 normal no-margin"></div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Thiết kế web theo yêu cầu</strong></li>
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Miễn phí</strong> 1 hosting + tên miền</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Hỗ trợ 24/7</li>
<li><i class="fa fa-check" aria-hidden="true"></i>Bảo hành vĩnh viễn</li>
<li><i class="fa fa-check" aria-hidden="true"></i><strong>Chức năng đặt hàng, thanh toán</strong></li>
</ul>
<button class="btn button btn-block">Đăng ký</button>
</div>
</div>
</div>
</div>
</div>
<!--pricing table end -->
On $post->body contain this table HTML.
I want the table HTML should be at the center page.
But it have position inside .page-section .container.
I can add class and style in the table HTML. Have any method to change position this table doesn't depend on parent div?
Current my table HTML looks like:
Explain:
On text, you can see dimension is equal.
I want the HTML table should have dimension also equal.
But the HTML table inside div contains text.
Remove div.container inside your table #pricing-table-section. It will be fixed.
From the screen capture you are sharing it seems that the table is overflowing the container.
You can try to add a width and a table-layout: fixed, like that:
#pricing-table-section .pricing-table {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 400ms linear;
transition: all 400ms linear;
padding: 32px 21px;
border-radius: 8px;
background: #f5f5f5;
table-layout: fixed;
width: 100%
}

Issue with <p></p> in Bootstrap 4, HTML, and CSS

I try to have multiple p tags in a division, but the paragraphs aren't separating and are just bunching together. The applicable code is as follows:
<div class="row">
<div class="col-md-12 d-flex justify-content-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>
</div>
and the link to codeply is https://www.codeply.com/go/cJ37oz9g4Q. If you go to codeply, then you'll see that "Test" appears immediately after the word "REFUNDS". I have tried modifying the code, looking for known issues, etc.
How can I fix this?
You need to remove d-flex class from this code:
<div class="col-md-12 justify-content-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>
This is because of d-flex class - it forces <p> to become flex-items and by default they align themself along horizontal axis. Replace d-flex and justify-content-center with text-center
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align:center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover {
background: #4060A5;
}
.social .fa-twitter:hover {
background: #00ABE3;
}
.social .fa-instagram:hover {
background: #375989;
}
.social .fa-youtube:hover {
background: #FF1F25;
}
.social .fa-youtube-play:hover {
background: #DF192A;
}
p {
color: #FFF;
}
.paddding-top {
padding-bottom: 15px;
padding-top: 18px;
border-bottom: 1px solid white;
}
/*this is the padding for the form from the top*/
.padding-form-top{
padding-top: 18px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="bg-inverse">
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<div class="social">
<ul>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<div class="col-md-4 col-md-offset-4 text-center padding-form-top">
<form class="form-width">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Your Email Address">
</div>
<button type="submit" class="btn btn-success">Sign Up for the Latest Updates</button>
</form>
</div>
</div>
</div>
</footer>

How do I fit my element inside a container div

So I have an interface where I want a sidemenu to the left, and the rest of the area should contain a chat-field. The problem is that the chat-field is overflowing the container, and half of the chat-field goes outside the container div.
How do I fit the chat-field in the container with these settings? The container is named #chat-canvas
Here's a JSFiddle: https://jsfiddle.net/v5k1Lhgf/1/
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
Please check snippet in full page for a better view
Replacing height: 100% with min-height: 100% in selector #chat-canvas will make your chat-canvas cover its child chat-field
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
min-height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
You should use calc(%100 - 200px); as a value to the width. Look up calc CSS it will work because I had the same problem.
Here you go: https://www.w3schools.com/cssref/func_calc.asp
I tried to solve your problem. please check https://jsfiddle.net/komal10041992/v5k1Lhgf/4/. I removed overflow property, gave height:auto and width: 100%

2 column divs with divs inside center aligned responsively

I have 2 columns inside of a div, with each column containing 3 divs each. As this is for a mobile site, I want them to be aligned in the center responsively. They're aligned fine when resized for a standard mobile (320px, 375px) like so: http://imgur.com/a/WDwSL, but when resized at tablet size, they don't center align at all. http://imgur.com/a/mMTRG
How can I get them to stay in the center no matter what size the phone size? I tried media queries and other responsive grids but they didn't work. Any help would be appreciated. Thanks!
.two-circles {
width: 100%;
}
.circles-left {
width: 37%;
float: left;
margin-left: 18%;
padding: 0;
display: block;
}
.circles-right {
width: 37%;
padding-bottom: 13%;
float: left;
display: block;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<div class="clear"></div>
</div>
JSFIDDLE
.two-circles {
width: 100%;
}
.circles-left,.circles-right {
width: 45%;
padding-bottom: 13%;
float: left;
}
.circles-right {
text-align:left;
padding-left: 5%;
}
.circles-left {
text-align:right;
padding-right: 5%;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
display: inline-block;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div></a>
</div>
</div>
<div class="clear"></div>
</div>
use this css. i didnt make any changes in HTML. my suggestion is you need to do some changes in both HTML and CSS
.wrapper{
width: 1170px;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.column{
width: 48%;
display: inline-block;
margin: 0 .5%;
}
.item{
width: 100%;
background-color: blue;
color: white;
margin-bottom: 20px;
display: inline-block;
}
<div class="wrapper">
<h2>2 column center divs</h2>
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="column">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
Would personally change your approach
There are many ways to do it but the most efficient and simplest way would be to use the CSS3 Flexbox. Designed to solve exactly these sort of layout issues.
Code reduces significantly as well. All you need is to give the outer .two-circles and inner .circles-left, .circles-right a property display: flex. Most importantly the justify-content: center to the inner circles to align it to the center. Shown below:
.two-circles {
width:100%;
display: flex;
flex-wrap: wrap;
}
.circles-left, .circles-right {
width:48%;
display: flex;
justify-content: center;
padding-bottom: 13%;
}
That's it! The rest of the code from .clear remains the same as you require.
Fiddle updated here
Using FLex will make this easier. See below.
body {
background: #ccc;
}
.two-circles {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.circles-left, .circles-right {
width: 37%;
text-align: center;
}
.circles-right {
padding-bottom: 13%;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<!--<div class="clear"></div> Remove-->
</div>
.heading{
margin: 40px 0px;
}
.heading h1{
text-align: center;
}
.block{
width: 100%;
text-align: center;
display: inline-flex;
}
.block_left, .block_right{
width: 50%;
}
.sub_block{
background: transparent;
border: 1px solid #ccc;
padding: 25px 30px;
border-radius: 50%;
}
.block_head{
margin: 40px 0px;
font-weight: bold;
}
<div class="heading">
<h1 class="">
RATE YOUR ANXIETY
</h1>
</div>
<div class="block">
<div class="block_left">
<span class="sub_block">
1
</span>
<div class="block_head">
Nervous
</div>
</div>
<div class="block_right">
<span class="sub_block">
2
</span>
<div class="block_head">
Uneasy
</div>
</div>
</div>
<!-- Third block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
5
</span>
<div class="block_head">
Fearful
</div>
</div>
<div class="block_right">
<span class="sub_block">
6
</span>
<div class="block_head">
Panicked
</div>
</div>
</div>
<!-- second block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
3
</span>
<div class="block_head">
Anxious
</div>
</div>
<div class="block_right">
<span class="sub_block">
4
</span>
<div class="block_head">
Worried
</div>
</div>
</div>
Since you mentioned grids, have you tried the concepts of display:inline-blocks?
CSS
.circles {
width:48%;
margin:1%; //not really required
display: inline-block;
}
.circle-wrapper {
text-align: center;
}
HTML
<div class="circle-wrapper">
<div class="circle">
<!-- content here -->
</div>
</div>
What display:inline-block does is that it wraps the space required to be exactly as much as the content it has (unless you define the width and height of course)
Thus with that you are able to place your elements the way you want.
What i have done in circles is I have defined the width of the circle to be 48% of the entire screen. Thus the content inside receives that much amount of space. (i could go for 50 but then there won't be space for margins and stuffs).
The wrapper class aligns these inline blocks to the center just like text blocks. :)
After all. text can be treated as inline-blocks

Bootstrap row-fluid doesn't nest side by side?

I am trying to divide row into 2 (span4 & span8) but couldn't manage so far. The second div (span8) slides down. What I am missing?
Here is my related markup:
<section id="products" data-direction="from-left">
<div class="container">
<h1>
<span lang="tr">ÜRÜNLERİMİZ</span>
</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row-fluid item active">
<div class="bannerImage">
<img src="images/waspmote_pro_t.png" alt="">
<img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
<img src="images/u13_gw_t.png" alt="">
</div>
<div class="caption row-fluid">
<div class="span12">
<h3>Waspmote</h3>
</div>
<div class="row-fluid">
<div class="span4">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
<div class="span8">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
</div>
</div>
</div><!-- /Slide1 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</section>
Here is the sample screenshot:
sample
Here is the FF debug:
sample
edit 1: It is Bootstrap v3.2.0
Here is my relevant custom CSS:
div {
word-break: break-all;
}
img {
max-width: 100%;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 8 */
filter: alpha(opacity=50);
/* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #fbf4e0;
margin: 40px auto 10px;
padding: 20px 0px;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 10px 0px;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.caption .span4,
.caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.caption ul{
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer,
.footer a {
color: #fff;
}
p.right {
float: right;
}
::selection {
background: #ff5e99;
color: #FFFFFF;
text-shadow: 0;
}
::-moz-selection {
background: #ff5e99;
color: #FFFFFF;
}
a,
a:focus,
a:active,
a:hover,
object,
embed {
outline: none;
}
:-moz-any-link:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
.bannerImage img {
margin-left: 10%;
/*margin-right: 10%;*/
}
edit 2: Here is the other CSS files.
<!-- ==============================================
CSS
=============================================== -->
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Thanks in advance & Best Regards.
So the classes you are using for scaffolding (row-fluid and span*) are from an older version of bootstrap.
You need to use the scaffolding classes of Bootstrap 3 for example: container-fluid, row, col-md-*. Check the full documentation on the Bootstrap 3 grid system here.
Example:
Instead of:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span4"></div>
</div>
</div>
Use:
<div class="container-fluid">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>