Diligent Disciple
Reputation: 15
Float troubles with CSS
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">[email protected]</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">[email protected]</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">[email protected]</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;
}
Upvotes: 1
Views: 116
Answers (3)
nouveau
Reputation: 1262
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.
Upvotes: 1
eithed
Reputation: 4320
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".
Upvotes: 1
elitenick
Reputation: 36
You need to clear your floats.
Specifically, after every two instances of:
</fieldset>
Add:
<div style="clear: both;"></div>
Upvotes: 1