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.
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.
I'm making a bar with some fields, I want it to looks like this:
But yet it looks like this:
As you can see, there are some problems
The button is not on the same line
Elements are not vertically aligned (the text is a bit higher than the serch bar)
I'm using Twitter Bootstrap and some CSS, I provide you a Plunker if you want to test the code (don't forget to put Plunker view in full screen or it won't show correclty).
Can you help me fix these problems?
PS: Language is french, I can translate if necessary :)
HTML code
<hr/>
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
CSS CODE
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}
Having together the .input-group and .col-md-3 class with break the .col-md-3 class. I would suggest to have them seperately. This will ensure that it will work in all screen sizes, e.g. when col-sm-* and col-xs-* are activated.
Also, for the vertical align issue, you can use the .form-control-static which has the same padding with textboxes and buttons.
<hr />
<div class="row">
<div class="col-md-3">
<p class="form-control-static">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</p>
</div>
<div class="col-md-3">
<div class="input-group recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."><br>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr />
Here is a working demo: http://www.bootply.com/MyKe33IrUu
input-group class is float:none. if we change it it will work
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche" style="float:left;">
<input type="search" class="form-control" ng-model="cc.search" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<!-- Nouveau compte -->
<div class="col-md-3 pull-right">
<button type="button" class="btn btn-nouveau" ng-click="cc.modeCreation = !cc.modeCreation">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
<style>
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}
</style>
What I'm trying to accomplish can be found here at this jsbin.
The labels need some space between the top and bottom of each other however whenever I try to add a margin like this:
.label-default {
margin-bottom: 5px;
}
Nothing changes, and no margin is added. How can I add a margin to make them less cluttered?
CSS
body {
background-color: #2d2d30;
}
.categories {
padding: 25px;
text-align: center;
margin:auto;
left: 0;
right: 0;
}
.panel-default {
background-color: rgba(0,0,0,0);
border: 0px solid;
box-shadow: 0px;
}
.label-default {
background-color: rgba(0,0,0,0.2);
font-size: 12px;
}
.label-highlight {
background-color: rgba(255,255,255,0.2);
font-size: 12px;
}
.break {
margin-top:-10px;
display:block;
}
HTML
<div class="panel panel-default" style='text-align:center;max-width:960px;margin:auto;left:0;right:0;'>
<p style='color:#fefefe;font-size:24px;font-weight:300;'>How can I add padding to the bottom of each label?</p>
<div class="panel-body">
<span class="label label-default pad">Default</span>
<span class="label label-default">Primary</span>
<span class="label label-default">Success</span>
<span class="label label-default">Info</span>
<span class="label label-default">Warning</span>
<span class="label label-default">Danger</span>
<span class="label label-default">Primary</span>
<span class="label label-default">Success</span>
<span class="label label-default">Info</span>
<span class="label label-highlight">Warning</span>
<span class="label label-default">Warning</span>
<span class="label label-default">Danger</span>
<span class="label label-default">Default</span>
<span class="label label-default">Default</span>
<span class="label label-default">Primary</span>
<span class="label label-default">Default</span>
<span class="label label-default">Primary</span>
<span class="label label-default">Success</span>
<span class="label label-default">Info</span>
...
</div>
</div>
Those 'labels' are span elements which have display:inline.
margin-top and margin-bottom don't work on inline elements. (see this demo)
To get the bottom margin to work, simply add display: inline-block to the label class.
.label-default {
background-color: rgba(0,0,0,0.2);
font-size: 12px;
display: inline-block; /* <---- */
}
Updated Jsbin
Your line-height is too small for the labels.
Add this to your CSS
.label{ line-height: 25px }
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>
I have a layout that has a container div tag and some nested floating div tags. I'm using them in this manner to have two column effect (rather than do table cells). On the web page, everything renders fine. But when I print, the floating ones aren't showing up correctly. It's a sequence of 2 sets of container div/floating divs and then a full width div tag (no floating). Here's the code:
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Provider: </span>
Name here
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Location: </span>
Name<br/>
Street Address<br/>
City, State Zip<br/>
Phone
</div>
</div>
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Appointments:</span>
<br />
No appointments scheduled
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Care Team:</span>
<br />
Name Here
</div>
</div>
<div style="margin-bottom: 5px; padding: 5px; border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br />
No referrals available
</div>
As stated, everything renders correctly on the web page. Thanks to #avrahamcool I have it fixed so that the top border lines are showing up correctly. However, when I use IE9, I am getting what looks like the following:
Provider: Name here
Location: Name
Street Address
City, State Zip
Phone
Appointments:
No appointments scheduled
Care Team:
Name Here
Referrals:
No referrals available
It's working fine in Chrome. The provider/location and appointments/care team are split into two columns between the border lines when it's printed (and shows up fine on the screen)
I've completely recreated your markup, so I can work with it.
this is the result. (notice how beautiful this is?)
I've tested it in IE10, IE9, IE8, FF, Chrome.
also, printed from each one, and it works like a charm.
If you have to write your HTML & CSS combined (I don't see a reason for that.. but who am I to judge) I will try to help you apply my solution to your HTML.
So, the main Idea is to lose the float thing altogether, and use inline-block instead.
but, inline-block adds extra-spacing to the elements (caused by new-lines in the markup), causing 50% to be a little more than that, therefor making the columns not to fit in one row.
I've used one of many tricks to resolved that issue. by applying font-size:0; on the container, and reapplying font size on his children.
also, I had to verticaly-align:top; the columns.
so, to summarize, this is the end result.
New HTML markup
<div class="Container">
<div class="Column">
<span class="Header">Provider:</span>
<span>Name here</span>
</div>
<div class="Column">
<span class="Header">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div class="Container">
<div class="Column">
<span class="Header">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div class="Column">
<span class="Header">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div class="Container">
<span class="Header">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
New CSS
*
{
margin: 0;
padding: 0;
}
.Container
{
margin-bottom: 5px;
border-top: 1px solid #000000;
font-size: 0;
}
.Container *
{
font-size: medium;
}
.Container .Column
{
display: inline-block;
width: 50%;
vertical-align: top;
}
.Container .Header
{
font-weight: bold;
}
Edit:
for some reason, I've dropped your padding. so here is a fiddle with padding in the container (all the rest is the same as before)
Edit 2 inline-style
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
Inline-Style V2
so, its probably the font fix that doesn't work for you. It's hard for me to debug, because it's working fine for me. so lets try another approach.
this time, we will eliminate the spacing between columns by deleting the new line from the markup. try this new markup.
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
media="print" like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Doing this should make it look the same as web page
and yes depeding on the browser like isherwood said if that is what you are pointing at.