I'm trying to achieve simple layout structure with Flexbox. I'm referring Guide to Flexbox and learning on my own. Below is my code and what I'm trying to achieve.
.order-history-items {
.order-history-table {
ul {
margin: 0;
padding: 0;
}
li {
list-style-position: inside;
list-style-type: square;
}
.order-shipped-to,
.order-items,
.order-total-price {
width: 33%;
}
.toggle {
cursor: pointer;
display: block;
}
}
}
.js .order-history-table .hidden {
display: none;
}
.orderdetails {
display: flex;
flex-wrap: wrap;
// margin: 0 1%;
h1 {
flex-basis: 100%;
}
h2 {
clear: both;
flex-basis: 100%;
text-align: center;
margin-bottom: 20px;
}
.label {
font-weight: bold;
margin-bottom: .3rem;
margin-top: .3rem;
text-transform: uppercase;
}
.order-shipment-table {
background-color: white;
border: 1px solid ;
border-radius: 5px;
padding: 1em;
}
.order-shipment-details {
.order-shipment-address {
float: right;
}
}
.line-items {
clear: both;
padding-top: 1rem;
.line-item {
padding-bottom: 1rem;
.line-item-details,
.line-item-quantity,
.line-item-price {
display: inline-block;
vertical-align: top;
}
.line-item-quantity,
.line-item-price {
width: 14%;
}
.line-item-details {
width: 70%;
a {
font-size: 1.1rem;
}
}
.line-item-quantity {
text-align: center;
}
.line-item-price {
text-align: right;
}
}
}
flex-basis: 25%;
.order-payment-summary {
#media screen and (min-width: 480px) {
float: right;
}
.label {
font-weight: 800;
font-size: 15px;
margin-bottom: 12px;
}
.order-detail-summary {
.order-key {
text-transform: uppercase;
color: #000;
letter-spacing: 0;
font-size: 12px;
}
.order-value.number--smallest {
font-size: 12px;
font-weight: bold;
letter-spacing: 0px;
color: #000;
}
.order-value.number--large {
color: #000;
letter-spacing: 0;
}
}
}
.order-information {
flex-basis: 100%;
margin-bottom: 30px;
// padding-bottom: .5em;
// padding-top: .5em;
.order-status {
span {
color: #000;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
font-size: smaller;
}
}
.order-date {
span {
color: #000;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
font-size: smaller;
}
}
.label {
color: white;
font-weight: 300;
text-transform: none;
}
.value {
font-weight: 700;
}
.order-number {
font-size: 1.75rem;
}
}
.payment-amount {
.label {
font-weight: normal;
text-transform: none;
}
}
.order-totals-table td {
&:first-child {
padding-right: 5rem;
text-align: left;
}
}
.order-payment-instruments,
.order-billing,
.order-shipment-address
{
flex-basis: 25%;
.label {
font-weight: 800;
font-size: 15px;
}
}
.order-payment-instruments{
padding-left: 84px;
}
.order-billing {
padding-left: 100px;
}
.order-shipment-address
{
padding-left: 120px;
}
.order-shipments {
h2 {
display: flex;
}
}
}
<div class="orderdetails">
<h1>My Order</h1>
<h2 class="order-number">
<span class="label">Order :</span>
<span class="value">STG00004302</span>
</h2>
<div class="order-information">
<div class="order-status">
<span class="label">Order Status:</span>
<span class="value clearfix">Complete</span>
</div>
<div class="order-date">
<span class="label">Order Placed:</span>
<span class="value">10/27/2017 11:02:15 AM</span>
</div>
</div>
<div class="order-payment-summary">
<div class="label">Payment Total</div>
<div class="order-detail-summary">
<div class="order-totals-table">
<div class="order-subtotal order-row">
<div class="order-key">Subtotal</div>
<div class="order-value number--smallest">C$ 21.33</div>
</div>
<div class="order-shipping order-row">
<div class="order-key">
Shipping
</div>
<div class="order-value number--smallest">
C$ 0.00
</div>
</div>
<div class="order-sales-tax order-row">
<div class="order-key">Taxes</div>
<div class="order-value number--smallest">
C$ 2.77
</div>
</div>
<div class="order-total order-row">
<div class="order-key">Order Total:</div>
<div class="order-value number--large">C$ 24.10</div>
</div>
</div>
</div>
</div>
<div class="order-payment-instruments">
<div class="label">
Payment Method
</div>
<div class="payment-type">PayPal</div>
<div class="payment-amount">
<span class="label">Amount:</span>
<span class="value">C$ 24.10</span>
</div>
<!-- END: payment-amount -->
</div>
<div class="order-billing">
<div class="label">Billing Address</div>
<div class="mini-address-name">
Dhon Rocafort
</div>
<div class="mini-address-location">
<address>
1120 N St
<br>Sacramento,
CA
95814-5680<br>
United States
<br>
2122121423
</address>
</div>
</div>
<div class="order-shipment-address">
<div class="label">Shipping To</div>
<div class="mini-address-name">
DihonsKi Rocafort
</div>
<div class="mini-address-location">
<address>
Air Canada Centre
<br>40 Bay St
<br>Toronto,
ON
M5J 2X2<br>
Canada
<br>
2122121423
</address>
</div>
<div class="shipping-method">
<div class="label">Method:</div>
<div class="value">StandardCA</div>
</div>
</div>
</div>
It should look like this in desktop view :
I'm caring about the main 4 columns in the end of the image, it should be responsive too. I don't have any specifics for the mobile view, but those 4 columns should be 2*2 in mobile view.
NOTE: OPEN THE SNIPPET IN FULL PAGE.
Now, first off please try to add as minimal code as possible because it's way too hard to go through this long HTML, you could remove extra tags and labels since all you need to know is how to align using flex.
I just adjusted the alignments to match the screenshot you posted. I added all the CSS properties as inline styles with style attribute on the respective tags.
Everything you need about Flexboxes will be here https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Try them out and you will get a hang of it very easily.
TIP Breakdown your webpage into components and wrap them in divs. It will be much easier to control alignments with this setup particularly with flexboxes.
html, body {
height: 100%;
}
.order-history-items {
.order-history-table {
ul {
margin: 0;
padding: 0;
}
li {
list-style-position: inside;
list-style-type: square;
}
.order-shipped-to,
.order-items,
.order-total-price {
width: 33%;
}
.toggle {
cursor: pointer;
display: block;
}
}
}
.js .order-history-table .hidden {
display: none;
}
.orderdetails {
display: flex;
flex-wrap: wrap;
// margin: 0 1%;
h1 {
flex-basis: 100%;
}
h2 {
clear: both;
flex-basis: 100%;
text-align: center;
margin-bottom: 20px;
}
.label {
font-weight: bold;
margin-bottom: .3rem;
margin-top: .3rem;
text-transform: uppercase;
}
.order-shipment-table {
background-color: white;
border: 1px solid ;
border-radius: 5px;
padding: 1em;
}
.order-shipment-details {
.order-shipment-address {
float: right;
}
}
.line-items {
clear: both;
padding-top: 1rem;
.line-item {
padding-bottom: 1rem;
.line-item-details,
.line-item-quantity,
.line-item-price {
display: inline-block;
vertical-align: top;
}
.line-item-quantity,
.line-item-price {
width: 14%;
}
.line-item-details {
width: 70%;
a {
font-size: 1.1rem;
}
}
.line-item-quantity {
text-align: center;
}
.line-item-price {
text-align: right;
}
}
}
flex-basis: 25%;
.order-payment-summary {
#media screen and (min-width: 480px) {
float: right;
}
.label {
font-weight: 800;
font-size: 15px;
margin-bottom: 12px;
}
.order-detail-summary {
.order-key {
text-transform: uppercase;
color: #000;
letter-spacing: 0;
font-size: 12px;
}
.order-value.number--smallest {
font-size: 12px;
font-weight: bold;
letter-spacing: 0px;
color: #000;
}
.order-value.number--large {
color: #000;
letter-spacing: 0;
}
}
}
.order-information {
flex-basis: 100%;
margin-bottom: 30px;
// padding-bottom: .5em;
// padding-top: .5em;
.order-status {
span {
color: #000;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
font-size: smaller;
}
}
.order-date {
span {
color: #000;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
font-size: smaller;
}
}
.label {
color: white;
font-weight: 300;
text-transform: none;
}
.value {
font-weight: 700;
}
.order-number {
font-size: 1.75rem;
}
}
.payment-amount {
.label {
font-weight: normal;
text-transform: none;
}
}
.order-totals-table td {
&:first-child {
padding-right: 5rem;
text-align: left;
}
}
.order-payment-instruments,
.order-billing,
.order-shipment-address
{
flex-basis: 25%;
.label {
font-weight: 800;
font-size: 15px;
}
}
.order-payment-instruments{
padding-left: 84px;
}
.order-billing {
padding-left: 100px;
}
.order-shipment-address
{
padding-left: 120px;
}
.order-shipments {
h2 {
display: flex;
}
}
}
<div class="orderdetails" style="display: flex; flex-direction: column; height: 50%">
<h1 style="margin: auto;">My Order</h1>
<h2 class="order-number" style="margin: auto;">
<span class="label">Order :</span>
<span class="value">STG00004302</span>
</h2>
<div class="order-information" style="margin: 10px;">
<div class="order-status">
<span class="label">Order Status:</span>
<span class="value clearfix">Complete</span>
</div>
<div class="order-date">
<span class="label">Order Placed:</span>
<span class="value">10/27/2017 11:02:15 AM</span>
</div>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-around;">
<div class="order-payment-summary">
<div class="label">Payment Total</div>
<div class="order-detail-summary">
<div class="order-totals-table">
<div class="order-subtotal order-row">
<div class="order-key">Subtotal</div>
<div class="order-value number--smallest">C$ 21.33</div>
</div>
<div class="order-shipping order-row">
<div class="order-key">
Shipping
</div>
<div class="order-value number--smallest">
C$ 0.00
</div>
</div>
<div class="order-sales-tax order-row">
<div class="order-key">Taxes</div>
<div class="order-value number--smallest">
C$ 2.77
</div>
</div>
<div class="order-total order-row">
<div class="order-key">Order Total:</div>
<div class="order-value number--large">C$ 24.10</div>
</div>
</div>
</div>
</div>
<div class="order-payment-instruments">
<div class="label">
Payment Method
</div>
<div class="payment-type">PayPal</div>
<div class="payment-amount">
<span class="label">Amount:</span>
<span class="value">C$ 24.10</span>
</div>
<!-- END: payment-amount -->
</div>
<div class="order-billing">
<div class="label">Billing Address</div>
<div class="mini-address-name">
Dhon Rocafort
</div>
<div class="mini-address-location">
<address>
1120 N St
<br>Sacramento,
CA
95814-5680<br>
United States
<br>
2122121423
</address>
</div>
</div>
<div class="order-shipment-address">
<div class="label">Shipping To</div>
<div class="mini-address-name">
DihonsKi Rocafort
</div>
<div class="mini-address-location">
<address>
Air Canada Centre
<br>40 Bay St
<br>Toronto,
ON
M5J 2X2<br>
Canada
<br>
2122121423
</address>
</div>
<div class="shipping-method">
<div class="label">Method:</div>
<div class="value">StandardCA</div>
</div>
</div>
</div>
</div>
CHECK THIS CODEPEN
The code is cluttered, but I have used Flexbox for your Payment total and position:absolute to your class="order-value" and right:10px
Related
I Want to change font-weight to normal of h2 element. I'm trying to do it by change it in parent directory.
h2 {
margin: 0;
padding: 0;
}
.top, .date {
display: inline-block;
width: 150px;
height: 30px;
border: 2px solid black;
text-align: center;
}
.date {
float: right;
font-size: 16px;
font-weight: normal;
}
<div id="instrument" class="top">
<h2>SP500</h2>
</div>
<div id="date" class="top date">
<h2>Data</h2>
</div>
<div class="date">
<h2>Czas Zamknięcia</h2>
</div>
I have no idea what you mean by parent directory, I guess you mean by selecting it with a parent tag/class/id, in that case, this is how you do it:
parent-tag h2 {
font-weight: normal;
}
or if you want to do it by parent class/id name like this
.className/#idName h2 {
font-weight: normal;
}
h2 {
margin: 0;
padding: 0;
}
.top, .date {
display: inline-block;
width: 150px;
height: 30px;
border: 2px solid black;
text-align: center;
}
.date {
font-size: 16px;
font-weight: normal;
}
.date>h2 {
font-size: 16px;
font-weight: normal !important;
}
<div id="instrument" class="top">
<h2>SP500</h2>
</div>
<div id="date" class="top date">
<h2>Data</h2>
</div>
<div class="date">
<h2>Czas Zamknięcia</h2>
</div>
I'm making this site and working on second page. However, I have trouble for centering component in the whole viewport. I searched lots of solutions including position, display:table, etc. But, I couldn't know how to use for this situation.
.header {
background-color: #F7F7F7;
padding: 15px;
}
.header h1 {
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
float: right;
}
.header__nav li {
float: left;
display: flex;
align-items: center;
height: 38px;
}
.header__nav li a {
margin-right: 39px;
display: inline-block;
font-size: 20px;
font-weight: bold;
transition: all 0.5s;
}
.header__nav li a::after {
content: '';
width: 0;
height: 2px;
background-color: black;
transition: 0.3s;
display: block;
}
.header__nav li a:hover::after {
width: 100%;
}
.header__nav li button:hover::before {
width: 100%;
}
.contents {
padding: 150px 100px;
}
.contents__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.contents__inside strong {
font-style: italic;
font-size: 1rem;
}
.contents__inside h2 {
margin-bottom: 10px;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}
.contents__inside img {
width: 100%;
}
.contents__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto;
}
.info__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.info__inside h2 {
margin-bottom: 30px;
font-size: 4rem;
font-weight: bold;
line-height: 1;
}
.info__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto 100px;
}
.info__inside img {
width: 100%;
}
.footer {
background-color: blue;
}
<header class="header clearfix">
<div class="l-wrapper">
<h1><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</div>
</header>
<section class="contents">
<div class="l-main">
<div class="contents__inside">
<strong>Top quality</strong>
<h2>ICONS</h2>
<p>6,500 unique icons in different categories.
Drawn by hand and designed for perfection.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
</div>
</div>
</section>
<section class="info">
<div class="l-main">
<div class="info__inside">
<h2>Thousands of icons</h2>
<p>6,500 unique icons in 3 style color, line and solid.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
</div>
</div>
</section>
<footer class="footer">
</footer>
Is there an any proper method to solve this issue? How can I implement like original design of website?
EDIT
I don't wanna solve by using CSS3 property to practice CSS2
IMAGE that I wanna fix
If i understand you, You want to center your items in your div
To do that you can
.yourDivClassName{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
<body>
<div class="yourDivClassName">
<button>example button</button>
<p>example text</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU" alt="example image">
</div>
</body>
first time poster here. I've been freshing up on my HTML and CSS and I've encountered some small problems.
If you look at the link then you can see some unwanted spacing between the pink colored "My Gaming Life" and the plum colored "My Lack of Religion". Those 2 paragraphs have an id of right and I've set them to float:right as so;
#right {float:right;}
Ive done the same with the elements on the left side like so:
#left {float:left;}
I will put a full list of the code below and a picture of the website:
The CSS:
p {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
ul {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(123, 321, 78, .2);
padding-right: 5ps;
}
li {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
h1, h2, h3, h4, h5, h6 {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
#span1 {
text-decoration: underline;
}
#hello {
margin-top: 1em;
font-size: 3em;
}
#wonder {
font-family: "Poiret One", cursive;
font-weight: bold;
font-size: 2.5em;
}
#mystery {
font-size: 2em;
font-family: "Dancing Script", cursive;
padding-bottom: 5px;
margin-bottom: 15px;
}
.intro {
background-color: rgba(240,230,140, 0.8);
}
.intro p {
color: #000029;
}
#img1 {
width: 75px;
height: 75px;
margin-right: 2px;
margin-bottom: 5px;
}
.img_header {
/*float: left;*/
border: 2px solid #1f2f31;
border-radius: 10px;
background-color: rgba(255,69,0,0.3);
width: 24%;
}
.img_header_container h3 {
padding: 15px;
margin-top: -15px;
margin-bottom: -2px;
}
.picture {
margin-left: 5px;
margin-bottom: 5px;
}
.center {
display: table;
margin: auto;
}
.main_container {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(157, 139, 178, .5);
}
.main_container p {
padding-left: 10px;
}
.list {
width: 24%;
/*float: left;*/
}
.img_header {
width: 24%;
}
.main_content {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(205, 120, 200, .5);
margin-bottom: 5em;
}
.main_content_container {
text-align: center;
padding-bottom: 10px;
}
.main_content_container p {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.main_content_container a {
font-size: 2em;
color: #D6EBFF;
}
.religion {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(103, 0, 124, .5);
margin-bottom: 5em;
}
.religion_container {
text-align: center;
padding-bottom: 10px;
}
.religion_container {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.religion_container a {
font-size: 2em;
color: #D6EBFF;
}
#left {
float: left;
}
#right {
float: right;
}
body {
background-image: url("http://orig01.deviantart.net/064f/f/2010/064/6/1/arcane_symbols_by_stinkmeaner.jpg");
background-color: black;
font-size: 100%;
}
The HTML:
<div class="intro">
<div class="intro_container">
<p id="hello", class="center">Content </p>
<p id="wonder", class="center">Content</p>
<p id="mystery", class="center">Content</p>
</div>
</div>
<div class="main">
<div class="main_container">
<p>Content</p>
</div>
<div class="list" id="left">
<div class="list_container">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
</div>
<div class="main_content" id="right">
<div class="main_content_container">
<h2>title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
<div class="img_header" id="left">
<div class="img_header_container">
<h3>Title</h3>
<div class="picture">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
</div>
</div>
</div>
<div class="religion" id="right">
<div class="religion_container">
<h2>Title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
Do you have any clues ?
Id MUST be unique. You cannot have multiple "right" div. If the same style should be applied to multiple elements, it should be a class. It is also true for id img1
<div class="font_links"> is useless since the <link> tags are not displayed.
You used margin-bottom: 5em instead (?) of margin-bottom: 5px
http://jsfiddle.net/29tz5efb/
Your .main_content has margin-bottom: 5em; which causes it to move down
IDs should only be used with a single element; if you intend to apply a particular style to multiple elements, then a class should be used.
The spacing issue is caused by .main_content - the margin-bottom: 5em; produces a 5em (five times the size of a 'M' in whatever font size you were using) gap between your pink- and plum-coloured paragraph.
Remove margin-bottom: 5em; on .main_content
I'm trying to create a result page for matches, however at the moment it looks weird when the VS is not centered at all time. My question is then how can i always center the VS?
http://jsfiddle.net/3adhoker/
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
margin-left: 2.5%;
text-align: left;
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>
You can use display: table and display: table-cell and set a fix width(check comments in css):
.result-in-month:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month {
background-color: #f3f3f3;
display: table;/*add display table*/
width: 100%;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: table-cell;/*add display to table-cell*/
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: table;/*add display table*/
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
display: table-cell;/*add display to table-cell*/
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
display: table-cell;/*add display to table-cell*/
margin-right: 2.5%;
text-align: right;
}
.gdlr-result-match-team.gdlr-right {
display: table-cell;
margin-left: 2.5%;
text-align: left;
width: 200px;/*set width to a fixed value for example 200px*/
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>
Instead of using display: table-cell;, it's better to use real tables for this. For actual tabular data they are still the best solution.
.result-in-month tr:nth-child(even) {
background-color: #ebebeb;
}
.result-in-month{
border-spacing: 0px;
border-collapse: separate;
font-size: 15px;
width: 100%;
background-color: #f3f3f3;
}
.result-in-month td{
padding: 20px 30px;
}
.gdlr-result-date {
font-style: italic;
}
td.gdlr-result-match-versus {
padding: 0;
font-weight: normal;
}
.gdlr-result-match-team {
font-weight: bold;
text-transform: uppercase;
}
.gdlr-left {
text-align: right;
}
.gdlr-right {
text-align: left;
}
<table class="result-in-month">
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real Soccer</td>
</tr>
<tr>
<td class="gdlr-result-date">25 Sun - 14:00</td>
<td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
<td class="gdlr-result-match-versus">VS</td>
<td class="gdlr-result-match-team gdlr-right">Real MASTERCLASS</td>
</tr>
</table>
JSFiddle
.result-in-month {
...
display: table-row;
}
.result-in-month > div {
display: table-cell;
padding: 10px 0;
}
.gdlr-result-match-team-wrapper > span {
display: table-cell;
padding: 0 10px;
}
Demo
My solution uses position:absolute
http://jsfiddle.net/3adhoker/4/
.result-in-month {
position: relative;
background-color: #f3f3f3;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}
.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
position: absolute;
}
.gdlr-result-match-versus {
font-weight: normal;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.gdlr-result-match-team.gdlr-left {
text-align: right;
width: 50%;
position: absolute;
left: 0;
padding-right: 30px;
box-sizing: border-box;
}
.gdlr-result-match-team.gdlr-right {
text-align: left;
position: absolute;
padding-left: 30px;
width: 50%;
right: 0;
box-sizing: border-box;
}
I have 3 buttons and I want that to be of same height.Also I want that to be of same height in tab resolution as well.I want this to be achieved in css.
Can anyone please tell me how can i achieve that.
HTML:
<div class="content">
<p>It's easy to become a member. </p>
<p> Join today online </p>
<div class="btn-wrap">
<div class="row">
<div class="col">Find Nearest Agent</div>
<div class="col"><a href="" >Join Now</a></div>
<div class="col"><a href="" >Download the App</a> </div>
</div>
</div>
</div>
CSS:
.content {
width:75%; //there is a reason to use 75% here coz I have to place an image for remaining 25%.
}
.btn-wrap {
display:table;
border-collapse: separate;
width:100%;
overflow: hidden;
}
.row {
display:table-row;
}
.col {
display:table-cell;
padding: 0 0.5% 0;
width:32%;
float: left;
}
a {
font-size: 20px;
}
input[type="submit"], a {
border: 0 none;
box-sizing: border-box;
display: block;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 900;
margin: 0;
padding: 20px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background-color: #ff0;
color: #1d6221
}
JSFiddle:http://jsfiddle.net/qwdduc7z/5/
Add height: 75px; to input[type="submit"], a{. eg. here
HTML
<div class="content">
<p>Easy to become number</p>
<p>Join Now </p>
<div class="btn-wcircle-wrap">
<div class="row">
Find Nearest Agent
Join Now
Download the App
</div>
</div>
</div>
CSS
.content {
width:75%;
}
.btn-wcircle-wrap {
display: table;
height: 100px;
}
.row {
display: table-row;
}
.col {
display: table-cell;
padding: 0 0.5%;
width: 32%;
}
a {
border: none;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
line-height: 1.5;
font-style: normal;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
background-color: #ff0;
color: #1d6221;
}
"to mimic the original example"
.content
{
width:75%;
}
.btn-wcircle-wrap {
display:table;
width:100%;
}
.row {
display:table-row;
}
.col {
display:table-cell;
padding: 20px 0.5%;
width:32%;
text-align: center;
background-color: #ff0;
box-shadow: 5px 0 0 0 white inset;
// or use
// border: 5px solid white;
}
a {
box-sizing: border-box;
vertical-align: text-top;
font-family: "Lato",Arial,sans-serif;
font-size: 17px;
line-height: 1.5;
font-style: normal;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
color: #1d6221;
}
http://jsfiddle.net/tksek87m/