Jessie Campbell Jessie Campbell - 5 months ago 12
CSS Question

Alignment not equal caused by float?

Tried to create 3 column without responsiveness. But got a strange alignment issue.

http://jsfiddle.net/z5mgqk6s/



#DIV_1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 83.2px;
text-align: center;
width: 1522.4px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 761.2px 41.6px;
transform-origin: 761.2px 41.6px;
background: rgb(67, 82, 85) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1*/

#DIV_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 83.2px;
text-align: center;
width: 800px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 250px 41.6px;
transform-origin: 250px 41.6px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
margin: 0px 511.2px;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_2*/

#DIV_3 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 59.8px;
text-align: left;
width: 155.075px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 77.5375px 29.9px;
transform-origin: 77.5375px 29.9px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 15px 0px 0px;
}/*#DIV_3*/

#SPAN_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: left;
column-rule-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal bold normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_4*/

#BR_5, #SPAN_7 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: left;
column-rule-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#BR_5, #SPAN_7*/

#IMG_6 {
bottom: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 16px;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: -1px;
vertical-align: middle;
width: 15px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 7.5px 8px;
transform-origin: 7.5px 8px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#IMG_6*/

#IMG_8 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 83px;
text-align: center;
vertical-align: middle;
width: 59px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 29.5px 41.5px;
transform-origin: 29.5px 41.5px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#IMG_8*/

#DIV_9 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: right;
height: 54.8px;
text-align: right;
width: 155.075px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 77.5375px 27.4px;
transform-origin: 77.5375px 27.4px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 10px 0px 0px;
}/*#DIV_9*/

#SPAN_10 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: right;
height: 22.4px;
text-align: right;
width: 93.2875px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 46.6375px 11.2px;
transform-origin: 46.6375px 11.2px;
border: 0px none rgb(255, 255, 255);
font: normal normal bold normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_10*/

#BR_11, #SPAN_13 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: right;
column-rule-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#BR_11, #SPAN_13*/

#IMG_12 {
bottom: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 16px;
left: 0px;
position: relative;
right: 0px;
text-align: right;
top: -1px;
vertical-align: middle;
width: 15px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 7.5px 8px;
transform-origin: 7.5px 8px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#IMG_12*/

#DIV_14 {
box-sizing: border-box;
clear: both;
color: rgb(255, 255, 255);
text-align: center;
width: 500px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 250px 0px;
transform-origin: 250px 0px;
border: 0px none rgb(255, 255, 255);
font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_14*/

<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
<span id="SPAN_4">KUALA LUMPUR</span><br id="BR_5" /><img src="img/search/return-depart-calendar.jpg" alt="" id="IMG_6" /> <span id="SPAN_7">10th October 2016</span>
</div><img src="img/search/depart-return-mid-arrow.jpg" id="IMG_8" alt='' />
<div id="DIV_9">
<span id="SPAN_10">ALOR SETAR</span><br id="BR_11" /><img src="img/search/return-depart-calendar.jpg" alt="" id="IMG_12" /> <span id="SPAN_13">10th October 2016</span>
</div>
<div id="DIV_14">
</div>
</div>
</div>





Any idea why the alignment of the text is not equal? right text of float:right element is higher than the left one.

Answer

You are using padding: 15px 0px 0px; on#DIV_3

and padding: 10px 0px 0px; on#DIV_9

this default behavior as you have two different paddings, you have to make it the same padding for both of them