I am trying to get the horizontal scroll for the div slots. Below is my code.
Slots is the container with 200 px width, which will display 2 slots,
Each slot of width 100 px.
I want to display horizontal scroll when number of slots is more than 2.
Please help me out.
<div class="slots">
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
<div class="slot">
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
</div>
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
</div>
.slots{
width: 200px;
overflow-y: hidden;
display: inline-table;
height: 25px;
overflow: auto;
}
.slot{
width:100px;
height:25px;
display: inline-block;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
Here you go mate...
Fiddle : http://jsfiddle.net/logintomyk/6K6f8/1/
CSS
.slots{
width: 200px;
height: 50px;
overflow-x:scroll;
white-space: nowrap;
}
.slot{
height:25px;
width:100px;
display: inline-block;
cursor:pointer;
margin-left:20px;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
HTML
<div class="slots">
<div class="slot">
<span class="slot-free"> span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> ggvg</span>
</div>
<div class="slot">
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">dfffff </span>
</div>
<div class="slot">
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> sdfdfds</span>
</div>
</div>
Related
I would like my button to display as a block but the button sways to the right at times and I am not sure why
I have tried various styling edits but none seem to work
What is the problem with my code?
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
This is what I get at times:
What I want
To adjust the code you provided, I would add these styles to the <a> tag where the button you want to style is:
display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none
This is the final result:
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}" style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 10px auto;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
Hope that this is what you were asking for.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.
Currently they have the following CSS:
.myDiv {
width: calc(100% - 67%);
float: left;
}
What else am I missing to accomplish this?
I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM
This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a cleaned up version from the codepen link:
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>
I can't figure where this space is coming from (marked in red in attached image)? Any pointers?
This is a 'Coming soon' page with mainly a masthead and a mastfoot, and some social links positioned differently if on mobile or desktop. I'm having problems with the mobile view.
This is the relevant HTML:
<div class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">Register</h1>
<p class="mb-5">Building a X.
We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
<form action="https://hen.us18.list-manage.com/subscribe/post" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="hidden" name="u" value="377b993ba697354f6584371c9">
<input type="hidden" name="id" value="e1c7ba1f4b">
<div class="input-group input-group-newsletter">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter your email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Notify Me!</button>
</div>
<input type="hidden" name="ht" value="f5b0455009025ab4743b2ecc932316028905c673:MTUzMTgyNjMzMC43NDM3">
<input type="hidden" name="mc_signupsource" value="hosted">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="mastfoot">
<div class="inner-mastfoot">
© 2018 X Ltd. All Rights Reserved. •
Legal
• Contact
</div>
</div>
<div class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-medium"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
and the relevant CSS:
.masthead .masthead-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
}
.social-icons {
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
}
.social-icons ul {
margin-top: 2rem;
width: 100%;
text-align: center
}
.social-icons ul>li {
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
}
.social-icons ul>li>a {
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
.mastfoot {
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
}
.inner-mastfoot {
font-size: 0.8rem;
text-align: center
}
So far as I can tell - in this case, on desktop by resizing my window to be as thin as a mobile screen - it's because your content isn't tall enough to fill the screen.
Image: https://i.stack.imgur.com/9Cmyr.png
Your mystery space is just the height of the <body>, unfilled by content.
I am struggling to get the third row of DIVs to align properly even though the float values are set to Left and Right as the previous DIVs. I am appending the entire HTML and CSS files here so that it would be easy for you to reproduce the problem and tell me where I am making the mistake.
<html>
<head>
<title>
Untitled Page
</title>
<link href="DefaultStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<form>
<div class="page">
<div class="main">
<div id="SomeHeading">
<div>
<span style="display:block">
<div>
<span><span class="bookName">Book Name : Beginning CSS</span><span class="bookDate">.</span>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Captn</span>
<span id="dot">. </span>
<span id="Full_NameLabel">David Beckham</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">1 Some Street</span>
<br>
<span id="SuburbLabel">Some State</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2324</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3242 3435</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">1 Some Street</span>
<br>
<span id="Label3">Some State</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2324</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3434 3533</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">0424 243 434</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Captain.Beck#gmail.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl0$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Beginning CSS</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$273.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">Yes</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">1243 4545 6457 5678</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">234</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Captain Beck</span>
<br>
</fieldset>
<br>
</span>
</div>
<span style="display:block">
<div>
<span>
<span class="bookName">Book Name : Effective C++</span>
<span class="bookDate">.</span>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Miss</span>
<span id="dot">. </span>
<span id="Full_NameLabel">Shanahan Christie</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">KMS Oregon School</span>
<br>
<span id="SuburbLabel">Oregon</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2914</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 6241 7650</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">KMS Oregon School</span>
<br>
<span id="Label3">Oregon</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2914</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 6241 7650</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">1234 776 031</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Shanahan.Cristie#harrisonSchool.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl2$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Effective C++</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$250.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">No</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">1234 5678 9098 7654</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">123</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Shanahan Christie</span>
<br>
</fieldset>
<br>
</span>
</div>
<span style="display:block">
<div>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Profe</span>
<span id="dot">. </span>
<span id="Full_NameLabel">Kallis K</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">36 Westmead Street</span>
<br>
<span id="SuburbLabel">Giralang</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2423</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3232 3242</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">36 Westmead Street</span>
<br>
<span id="Label3">Giralang</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2423</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3423 4232</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">0423 242 323</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Kalis#gmail.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl4$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Effective C++</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$175.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">Yes</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">2324 3232 4242 3442</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">232</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Kallis K</span>
<br>
</fieldset>
<br>
</div>
</span>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</form>
</body>
</html>
The CSS file ...
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
.page
{
width: 1200px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
.clear
{
clear: both;
}
/* Default Style.css*/
.caption
{
width:6em;
float:left;
margin-right:0.2em;
display:block;
font-weight:bold;
color:#b51032;
}
.caption1
{
width:9em;
float:left;
margin-right:0.2em;
display:block;
font-weight:bold;
color:#b51032;
}
.bookHeader
{
display:block;
background-color:#b51032;
color:white;
font-weight:bold;
font-size:large;
}
.bookDate
{
color:#b51032;
font-weight:bold;
font-size:large;
float:right;
background-color:#b51032;
width:15%;
text-align:right;
margin-left:-30px;
/*border:1px dotted yellow;*/
}
.bookName
{
color:white;
font-weight:bold;
font-size:large;
float:left;
background-color:#b51032;
width:85%;
}
.button
{
float:right;
margin-top:100px;
margin-left:20px;
}
#PersonalDetailsFieldSet
{
border: 1px solid #781351;
width: 30em;
float:left;
font-weight:bold;
}
.address{
margin-top: 5px;
width: 30em;
border:1px solid #781351;
}
.address .Residential{
display: inline-block;
/*vertical-align: top;*/
width: 14em;
/*border:1px solid #781351;*/
}
.address .Organisational{
width: 14em;
margin-right: 15px;
padding-left: 5px;
float: right;
display: inline-block;
/*vertical-align: top;*/
border-left:1px solid #781351;
}
#PaymentDetailsFieldSet
{
border: 1px solid #781351;
width: 30em;
float:right;
margin-right:10px;
margin-left:-20px;
font-weight:bold;
}
.page
{
width: 960px;
margin: 20px auto 0px auto;
}
You need to clear the float between the rows - here: http://jsfiddle.net/YCZJ5/1/ is a fiddle with a fix.
To explain this behaviour, let's name left floating divs A and B, while right floating divs are C and D, so your structure is as follows:
AA CC
AA CC
BB DD
BB DD
Due to the heights however of each element, this is the result:
AA CC
AA CC
AA BB DD
BB DD
Adding clear after element C adds a "line break".
You need to clear your floats.
Specifically, after every two instances of:
</fieldset>
Add:
<div style="clear: both;"></div>
I think you just need a "clear-fix" which is just a little hack that adds a float... bla bla bla... you don't need to really know how it works, but Google it if you want to have full understanding. Overflow: hidden; also does the trick to force the div to extend and contain it's stuff, however, it has a slurry of side effects.
Add this "micro clear fix" CSS you your style sheet:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Then add the class .cf to the div's that are not "stretching" or whatever. in your case, .address
<div class="address cf">
You can also switch out cf in the css and put in .address - it depends how you approach css. I like the OOCSS approach. I have dedicated fixes for reused things that always need clearing, like .container or something, and then occasionally throw in a .cf on special cases.
HERE is a jsfiddle with your code in it. Next time, make a little tiny use case in a jsfiddle and we can narrow down the problem much faster.
Read about the micro clear fix HERE
You need some padding at the bottom of .address too I think - see the jsfiddle.
Hope this helps.
I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.
Examples serve best
On this page :
http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python
the ascii art should be centered (as it appears) but it should line up and look like "YAML".
Or this :
http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a
the error message should all line up as it does in a console.
First, create a parent div that centers its child content with text-align: center. Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>
If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:
max-width: 250px;
Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?
Assuming the element which is floated and will be centered is a div with an id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
If I understand you well, you need to use to center a container (or block)
margin-left: auto;
margin-right: auto;
and to left align it's contents:
text-align: left;
I've found the easiest way to centre and left-align text inside a container is the following:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Is this what you are looking for? Flexbox...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}
<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>
For those of us still working with older browsers, here's some extended backwards compatibility:
<div style="text-align: center;">
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
Line 1: Testing<br>
Line 2: More testing<br>
Line 3: Even more testing<br>
</div>
</div>
Partially inspired by this post: https://stackoverflow.com/a/12567422/14999964.
use CSS text-align and display properties to see changes accordingly. Margins are also helpful. For me in the case of SweetAlert to center and align left the following code works. For you may be a different scenario.
.format-pre pre {
font-size: 18px;
text-align: left;
display: inline-block;
}
in ts file
showPasswordHints(){
var message = 'Your password mist contain:<br>'+
'1. At least 8 characters in length<br>'+
'2. At least 3 Lowercase letters<br>'+
'3. At least 1 Uppercase letter<br>'+
'4. At least 1 Numbers<br>'+
'5. At least 1 Special characters<br>'+
'5. Maximum 16 characters in length';
Swal.fire({
html:'<pre>' + message + '</pre>',
customClass: {
popup: 'format-pre'
}
,
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
},
icon: 'info',
confirmButtonText: 'Got it',
confirmButtonColor: '#3f51b5',
});
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I came close to the above acceptable result using grid for each row and width for each column.
This is the raw text:
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I turned it into a completely centered grid with 3 columns:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Finally, I defined a specified width for each element. This resulted in a centered block with text that is justified left, except for the title:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Varying the width for each column (based on a counter of its content, for example), could provide better adjustment for edge cases.
THIS works
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>