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 }
Related
i have a div which is resizeable through css.
HTML :
<div id="resize">
<img src="{{env.assets_url}}assets/images/minified_signhere.png" [hidden]="!isNameNull(sign.name)" [attr.id]="'sign-img' + myindex">
<img src="{{env.assets_url}}assets/images/minified_signhere_dim.png" [attr.id]="'dimimg' + myindex" [hidden]="isNameNull(sign.name)">
<div style="position: absolute;z-index: 1000;left: 100%;" class="signbtns">
<span style="font-size: 17px; margin-bottom: 5px" class="fa fa-trash float-right change-cursor" aria-hidden="true" (click)="deleteSign(myindex)"
data-toggle="tooltip" title="Click to delete the signature."></span>
<span style="font-size: 17px;" class="fa fa-pencil float-right change-cursor" (click)="editSign(myindex)" aria-hidden="true"
data-toggle="tooltip" title="Click to edit the signature."></span>
</div>
</div>
and following is CSS
#resize {
display: flex;
resize: both;
overflow:auto;
}
::-webkit-resizer {
background-color: red;
cursor: ew-resize;
}
div is being resize correctly. i want to customize the background color of resizer but the ::-webkit-resizer doesn't seem to work.
You change the color of #resize, not ::-webkit-resizer.
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'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>
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 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.