Alignment not equal caused by float? - html

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.


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


I wouldn't do that this way, but I I think this is what you want
#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: 15px 0px 0px;
}
#SPAN_10 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: right;
height: 22.4px;
text-align: right;
width: 114.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;
}
#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;
float: left;
}
See fiddle http://jsfiddle.net/z5mgqk6s/1/

Related

How to have Flex Child Anchored Right

I'm trying to make an autocomplex box with multiselects. At the moment I have a flex parent container. Child elements are wrapping. It currently looks like this
I am trying to another child element that sticks on the far right. I have a JS fiddle of my adding the new child element but unfortunately it doesn't stick to the right and I'm unsure how to get it to.
https://jsfiddle.net/rgxph5j3/
I've tried many suggestions from here How to Right-align flex item?
What I've tried to set 'X' to
margin-left:auto
text-align: right;
justify-content: flex-end;
flex: 1 1 auto;
Any tips or suggestions would be greatly appreciated

One solution would be to target the last div (the one you want aligned to the right, and just give it flex-grow: 1, that way it will adjust it's width to occupy all available space on that row.
You can then adjust justify-content: flex-end to align all it's contents to the right, like so:
#DIV_1 > div:last-of-type {
flex-grow: 1;
justify-content: flex-end;
}
#DIV_1 > div:last-of-type {
flex-grow: 1;
justify-content: flex-end;
height: 100%;
}
#DIV_1 {
align-items: center;
block-size: 52px;
box-sizing: border-box;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
cursor: default;
display: flex;
height: 52px;
justify-content: flex-start;
perspective-origin: 194px 26px;
text-align: left;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
transform-origin: 194px 26px;
width: 388px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(13, 113, 200);
border-radius: 1px;
flex-flow: row wrap;
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
padding: 0px 8px 0px 0px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
cursor: default;
display: block;
text-align: left;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
cursor: default;
display: block;
text-align: left;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:before*/
#DIV_3, #DIV_9, #DIV_15, #DIV_21, #DIV_27, #DIV_33, #DIV_39, #DIV_45 {
align-items: center;
block-size: 12px;
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: flex;
height: 12px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 6.5px 6px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 6.5px 6px;
width: 13px;
border-top: 0px solid rgba(0, 0, 0, 0);
border-right: 0px solid rgba(0, 0, 0, 0);
border-bottom: 0px solid rgba(0, 0, 0, 0);
border-left: 1px solid rgba(255, 255, 255, 0.4);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 4px;
outline: rgb(255, 255, 255) none 0px;
padding: 2px 0px 2px 4px;
}/*#DIV_3, #DIV_9, #DIV_15, #DIV_21, #DIV_27, #DIV_33, #DIV_39, #DIV_45*/
#DIV_3:after, #DIV_9:after, #DIV_15:after, #DIV_21:after, #DIV_27:after, #DIV_33:after, #DIV_39:after, #DIV_45:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_3:after, #DIV_9:after, #DIV_15:after, #DIV_21:after, #DIV_27:after, #DIV_33:after, #DIV_39:after, #DIV_45:after*/
#DIV_3:before, #DIV_9:before, #DIV_15:before, #DIV_21:before, #DIV_27:before, #DIV_33:before, #DIV_39:before, #DIV_45:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_3:before, #DIV_9:before, #DIV_15:before, #DIV_21:before, #DIV_27:before, #DIV_33:before, #DIV_39:before, #DIV_45:before*/
#DIV_4, #DIV_10, #DIV_16, #DIV_22, #DIV_28, #DIV_34, #DIV_40, #DIV_46 {
block-size: 8px
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
height: 8px;
inline-size: 8px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 4px 4px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 4px 4px;
width: 8px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4, #DIV_10, #DIV_16, #DIV_22, #DIV_28, #DIV_34, #DIV_40, #DIV_46*/
#DIV_4:after, #DIV_10:after, #DIV_16:after, #DIV_22:after, #DIV_28:after, #DIV_34:after, #DIV_40:after, #DIV_46:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:after, #DIV_10:after, #DIV_16:after, #DIV_22:after, #DIV_28:after, #DIV_34:after, #DIV_40:after, #DIV_46:after*/
#DIV_4:before, #DIV_10:before, #DIV_16:before, #DIV_22:before, #DIV_28:before, #DIV_34:before, #DIV_40:before, #DIV_46:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:before, #DIV_10:before, #DIV_16:before, #DIV_22:before, #DIV_28:before, #DIV_34:before, #DIV_40:before, #DIV_46:before*/
#SPAN_5, #SPAN_11, #SPAN_17, #SPAN_23, #SPAN_29, #SPAN_35, #SPAN_41, #SPAN_47 {
block-size: 8px;
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: flex;
height: 8px;
inline-size: 8px;
justify-content: center;
perspective-origin: 4px 4px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-origin: 4px 4px;
width: 8px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5, #SPAN_11, #SPAN_17, #SPAN_23, #SPAN_29, #SPAN_35, #SPAN_41, #SPAN_47*/
#SPAN_5:after, #SPAN_11:after, #SPAN_17:after, #SPAN_23:after, #SPAN_29:after, #SPAN_35:after, #SPAN_41:after, #SPAN_47:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5:after, #SPAN_11:after, #SPAN_17:after, #SPAN_23:after, #SPAN_29:after, #SPAN_35:after, #SPAN_41:after, #SPAN_47:after*/
#SPAN_5:before, #SPAN_11:before, #SPAN_17:before, #SPAN_23:before, #SPAN_29:before, #SPAN_35:before, #SPAN_41:before, #SPAN_47:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5:before, #SPAN_11:before, #SPAN_17:before, #SPAN_23:before, #SPAN_29:before, #SPAN_35:before, #SPAN_41:before, #SPAN_47:before*/
#svg_6, #svg_12, #svg_18, #svg_24, #svg_30, #svg_36, #svg_42, #svg_48 {
block-size: 8px;
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
display: block;
fill: rgb(255, 255, 255);
height: 8px;
inline-size: 8px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 4px 4px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 4px 4px;
width: 8px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#svg_6, #svg_12, #svg_18, #svg_24, #svg_30, #svg_36, #svg_42, #svg_48*/
#svg_6:after, #svg_12:after, #svg_18:after, #svg_24:after, #svg_30:after, #svg_36:after, #svg_42:after, #svg_48:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
fill: rgb(255, 255, 255);
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#svg_6:after, #svg_12:after, #svg_18:after, #svg_24:after, #svg_30:after, #svg_36:after, #svg_42:after, #svg_48:after*/
#svg_6:before, #svg_12:before, #svg_18:before, #svg_24:before, #svg_30:before, #svg_36:before, #svg_42:before, #svg_48:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
fill: rgb(255, 255, 255);
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#svg_6:before, #svg_12:before, #svg_18:before, #svg_24:before, #svg_30:before, #svg_36:before, #svg_42:before, #svg_48:before*/
#path_7, #path_13, #path_19, #path_25, #path_31, #path_37, #path_43, #path_49
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
d: path("M 542.165 512 L 1017.77 36.437 C 1026.09 28.117 1026.09 14.592 1017.77 6.27201 S 995.925 -2.04799 987.605 6.27201 L 512 481.835 L 36.437 6.272 C 28.117 -2.048 14.592 -2.048 6.27201 6.272 S -2.04799 28.117 6.27201 36.437 L 481.835 512 L 6.272 987.563 C -2.048 995.883 -2.048 1009.41 6.272 1017.73 C 10.411 1021.91 15.872 1024 21.333 1024 S 32.256 1021.91 36.437 1017.77 L 512 542.166 L 987.563 1017.77 C 991.744 1021.91 997.206 1024 1002.67 1024 S 1013.59 1021.91 1017.77 1017.77 C 1026.09 1009.45 1026.09 995.926 1017.77 987.606 L 542.166 512.001 Z");
fill: rgb(255, 255, 255);
perspective-origin: 0px 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 0px 0px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#path_7, #path_13, #path_19, #path_25, #path_31, #path_37, #path_43, #path_49*/
#path_7:after, #path_13:after, #path_19:after, #path_25:after, #path_31:after, #path_37:after, #path_43:after, #path_49:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
fill: rgb(255, 255, 255);
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#path_7:after, #path_13:after, #path_19:after, #path_25:after, #path_31:after, #path_37:after, #path_43:after, #path_49:after*/
#path_7:before, #path_13:before, #path_19:before, #path_25:before, #path_31:before, #path_37:before, #path_43:before, #path_49:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: pointer;
fill: rgb(255, 255, 255);
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#path_7:before, #path_13:before, #path_19:before, #path_25:before, #path_31:before, #path_37:before, #path_43:before, #path_49:before*/
#DIV_8, #DIV_14 {
block-size: 16px;
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: flex;
height: 16px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto
perspective-origin: 27.3281px 8px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 27.3281px 8px;
width: 54.6562px;
background: rgb(179, 229, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px solid rgb(179, 229, 255);
border-radius: 8px;
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
margin: 2px 3px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 2px 6px;
}/*#DIV_8, #DIV_14*/
#DIV_8:after, #DIV_14:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_8:after, #DIV_14:after*/
#DIV_8:before, #DIV_14:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_8:before, #DIV_14:before*/
#INPUT_50 {
block-size: 30px;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
display: flex;
height: 30px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 79.5px 15px;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-origin: 79.5px 15px;
width: 159px;
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(42, 57, 74);
font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
padding: 8px 0px 8px 8px;
}/*#INPUT_50*/
#INPUT_50:after {
border-block-end-color: rgba(0, 0, 0, 0);
border-block-end-style: solid;
border-block-start-color: rgba(0, 0, 0, 0);
border-block-start-style: solid;
border-inline-end-color: rgba(0, 0, 0, 0);
border-inline-end-style: solid;
border-inline-start-color: rgba(0, 0, 0, 0);
border-inline-start-style: solid;
box-sizing: border-box;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
display: block;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
}/*#INPUT_50:after*/
#INPUT_50:before {
border-block-end-color: rgba(0, 0, 0, 0);
border-block-end-style: solid;
border-block-start-color: rgba(0, 0, 0, 0);
border-block-start-style: solid;
border-inline-end-color: rgba(0, 0, 0, 0);
border-inline-end-style: solid;
border-inline-start-color: rgba(0, 0, 0, 0);
border-inline-start-style: solid;
box-sizing: border-box;
caret-color: rgb(42, 57, 74);
color: rgb(42, 57, 74);
column-rule-color: rgb(42, 57, 74);
display: block;
text-decoration: none solid rgb(42, 57, 74);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(42, 57, 74) none 0px;
}/*#INPUT_50:before*/
#DIV_51 {
align-items: center;
align-self: flex-end;
block-size: 8px;
border-block-end-color: rgba(0, 0, 0, 0);
border-block-end-style: solid;
border-block-start-color: rgba(0, 0, 0, 0);
border-block-start-style: solid;
border-inline-end-color: rgba(0, 0, 0, 0);
border-inline-end-style: solid;
border-inline-start-color: rgba(0, 0, 0, 0);
border-inline-start-style: solid;
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: flex;
height: 8px;
inline-size: 24px;
justify-content: center;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
padding-inline-end: 4px;
padding-inline-start: 12px;
perspective-origin: 12px 4px;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
transform-origin: 12px 4px;
user-select: none;
width: 24px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
padding: 0px 4px 0px 12px;
}/*#DIV_51*/
#DIV_51:after {
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: block;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#DIV_51:after*/
#DIV_51:before {
border-block-end-color: rgba(0, 0, 0, 0);
border-block-end-style: solid;
border-block-start-color: rgba(0, 0, 0, 0);
border-block-start-style: solid;
border-inline-end-color: rgba(0, 0, 0, 0);
border-inline-end-style: solid;
border-inline-start-color: rgba(0, 0, 0, 0);
border-inline-start-style: solid;
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: block;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#DIV_51:before*/
#DIV_52 {
block-size: 8px;
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
height: 8px;
inline-size: 8px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 4px 4px;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
transform-origin: 4px 4px;
user-select: none;
width: 8px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52*/
#DIV_52:after {
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52:after*/
#DIV_52:before {
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52:before*/
#SPAN_53 {
block-size: 8px;
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: flex;
height: 8px;
inline-size: 8px;
justify-content: center;
perspective-origin: 4px 4px;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-origin: 4px 4px;
user-select: none;
width: 8px;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#SPAN_53*/
#SPAN_53:after {
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: block;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}/*#SPAN_53:after*/
#SPAN_53:before {
box-sizing: border-box;
caret-color: rgb(15, 27, 49);
color: rgb(15, 27, 49);
column-rule-color: rgb(15, 27, 49);
cursor: pointer;
display: block;
text-align: left;
text-decoration: none solid rgb(15, 27, 49);
text-size-adjust: 100%;
user-select: none;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(15, 27, 49) none 0px;
}
<div id="DIV_1">
<div id="DIV_8">
gold sponsor
<div id="DIV_3">
<div id="DIV_4">
<span id="SPAN_5"></span>
<svg id="svg_6">
<path id="path_7">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
test1
<div id="DIV_9">
<div id="DIV_10">
<span id="SPAN_11"></span>
<svg id="svg_12">
<path id="path_13">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
test2
<div id="DIV_15">
<div id="DIV_16">
<span id="SPAN_17"></span>
<svg id="svg_18">
<path id="path_19">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
zach
<div id="DIV_21">
<div id="DIV_22">
<span id="SPAN_23"></span>
<svg id="svg_24">
<path id="path_25">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
medicare a&B
<div id="DIV_27">
<div id="DIV_28">
<span id="SPAN_29"></span>
<svg id="svg_30">
<path id="path_31">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
days
<div id="DIV_33">
<div id="DIV_34">
<span id="SPAN_35"></span>
<svg id="svg_36">
<path id="path_37">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
new tag 1
<div id="DIV_39">
<div id="DIV_40">
<span id="SPAN_41"></span>
<svg id="svg_42">
<path id="path_43">
</path>
</svg>
</div>
</div>
</div>
<div id="DIV_8">
test
<div id="DIV_45">
<div id="DIV_46">
<span id="SPAN_47"></span>
<svg id="svg_48">
<path id="path_49">
</path>
</svg>
</div>
</div>
</div>
<input id="INPUT_50" name="TagList" />
<div id="DIV_51">
<div id="DIV_52">
<span id="SPAN_53"></span>
X
</div>
</div>
</div>

Equal height double column using css [duplicate]

This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
#DIV_1 {
bottom: -10px;
height: 176px;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 99px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 82px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/
<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>
I have 2 column that its content might have different length, thus it will have multiple lines, so how do I ensure that the least line of content have the equal height? I can't use fixed height like height:100px; because the length of the content might be more than that.

You can use flexbox to achieve equal heights. This is set on the outer wrapper div:
#DIV_1 {
display: flex;
flex-wrap: wrap;
}
You'll also need to remove the fixed heights and float on the inner divs. If you also want the content in the inner divs to be vertically centered you can make then display:
#DIV_2,
#DIV_3,
#DIV_4,
#DIV_5 {
display: flex;
flex-direction: column;
justify-content: center;
}
#DIV_1 {
bottom: -10px;
display: flex;
flex-wrap: wrap;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/
<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>

CSS Button not rendering correctly on iPad

I have a button created with css on a web application, when I test the button on chrome on android the button renders fine and stays on top of everything because of the z-index property:
But when I test the same thing on chrome on IOS it doesnt renders the button the way its supposed to be and doesnt respect the z-index property:
I tried to add "-webkit-appearance: none;" to the css but it didnt worked heres the css and html:
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 55.5px;
left: 0px;
letter-spacing: 0.5px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
top: 0px;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 27.75px 27.75px;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>

You may use flexbox to make them align horizontally and vertically center. Here's the code.
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
height: 55.5px;
letter-spacing: 0.5px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
/*Use flexbox property to fix this.*/
display: flex;
justify-content: center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>

How to fit content inside div

I'm having trouble fitting any amount of content inside the entire block div, I've tried to set the height to auto however that didn't work, I've tried the overflow property which didn't work as well. I would like the entire div height to expand when there is more content because I'm dynamically changing the content, I'm not understanding why the entire div height is not expanding as there is more content inside it. Below is the example.
Please provide thorough explanation to why the div height is not expanding.
#entire-block {
bottom: 50px;
box-shadow: rgb(159, 159, 155) 4px 4px 4px -1px;
box-sizing: border-box;
/* min-height: 136px; */
height: auto;
position: fixed;
overflow: ;
right: 0px;
width: 370px;
z-index: 999;
background: rgb(215, 215, 210) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/16px'Times New Roman';
padding: 10px 10px 13px;
}
/*#DIV_1*/
#A_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: none;
left: 5px;
position: fixed;
text-decoration: none solid rgb(255, 255, 255);
top: 43px;
z-index: 999;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 25px/25px'Source Sans Pro ExtraLight';
outline: rgb(255, 255, 255) none 0px;
}
/*#A_2*/
#x {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
height: 44px;
text-decoration: none solid rgb(255, 255, 255);
width: 21px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 44px/44px'Source Sans Pro ExtraLight';
margin: -11px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}
/*#A_3*/
#entire-content-section {
box-sizing: border-box;
height: 113px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_4*/
#IMG_5 {
box-sizing: border-box;
display: block;
float: left;
height: auto;
width: 40px;
font: normal normal normal 16px/16px'Times New Roman';
margin: 0px 10px 0px 0px;
}
/*#IMG_5*/
#top-content-section {
box-sizing: border-box;
height: 90px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_6*/
#content-header {
box-sizing: border-box;
height: 56px;
width: 350px;
font: normal normal normal 28px/28px league_gothicregular;
margin: 0px;
padding-top: 1%;
}
/*#H3_7*/
#middle-content {
box-sizing: border-box;
font: normal normal normal 16px/16px'Source Sans Pro';
}
/*#SPAN_8*/
#content-bottom {
box-sizing: border-box;
color: rgb(0, 173, 237);
cursor: pointer;
display: block;
height: 12px;
letter-spacing: 1.6799999475479126px;
text-decoration: none solid rgb(0, 173, 237);
text-transform: uppercase;
width: 350px;
border: 0px none rgb(0, 173, 237);
font: normal normal normal 12px/12px'Source Sans Pro Black';
margin: 11px 0px 0px;
outline: rgb(0, 173, 237) none 0px;
}
/*#A_11*/
<div id="entire-block">
<a id="x">×</a>
<div id="entire-content-section">
<img src="http://www.ratemyprofessors.com/assets/average-icon-b4b6eb5e309d26486d76ecebe920220f.jpg?1455038037" id="IMG_5" alt='' />
<div id="top-content-section">
<h3 id="content-header">
Average
</h3> <span id="middle-content">Attending class is not necessary, but reading the textbook is a must. I attended all of his classes for ECON1000 but didn't find it helpful, so I never went to class for ECON1010. Do your readings and study from the test banks. With some effort, you're guaranteed to get an A. Would take his class again.</span>
</div>
Find out what students are saying.
</div>
</div>

You have fixed the height that's why it is showing of fixed height. Remove height from #entire-content-section and #top-content-section.

Hover effects on list item 3

I'm trying to get li hover effect like the one on the right side bar of this page http://smokefree.gov/health-effects
as you see when you hover the background color and text color change
this is the code :
#ASIDE_1 {
box-sizing: border-box;
color: rgb(51, 51, 51);
float: left;
height: 528.171875px;
min-height: 30px;
width: 298.859375px;
perspective-origin: 149.421875px 264.078125px;
transform-origin: 149.421875px 264.078125px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
margin: 13.4399995803833px 12.015625px 0px 8.3125px;
outline: rgb(51, 51, 51) none 0px;
}/*#ASIDE_1*/
#DIV_2 {
color: rgb(51, 51, 51);
height: 232px;
width: 298.859375px;
perspective-origin: 149.421875px 116px;
transform-origin: 149.421875px 116px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_2*/
#DIV_3 {
color: rgb(51, 51, 51);
height: 232px;
width: 298.859375px;
perspective-origin: 149.421875px 116px;
transform-origin: 149.421875px 116px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
outline: rgb(51, 51, 51) none 0px;
overflow: hidden;
}/*#DIV_3*/
#IMG_4 {
color: rgb(51, 51, 51);
display: block;
height: 232px;
max-width: 100%;
vertical-align: middle;
width: 298.859375px;
perspective-origin: 149.421875px 116px;
transform-origin: 149.421875px 116px;
border: 0px none rgb(51, 51, 51);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#IMG_4*/
#DIV_5 {
color: rgb(51, 51, 51);
height: 283.171875px;
width: 298.859375px;
perspective-origin: 149.421875px 148.078125px;
transform-origin: 149.421875px 148.078125px;
border-top: 13px solid rgb(240, 240, 240);
border-right: 0px none rgb(51, 51, 51);
border-bottom: 0px none rgb(51, 51, 51);
border-left: 0px none rgb(51, 51, 51);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_5*/
#UL_6 {
color: rgb(84, 84, 84);
height: 283.171875px;
width: 298.859375px;
perspective-origin: 149.421875px 141.578125px;
transform-origin: 149.421875px 141.578125px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(84, 84, 84);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
margin: 0px;
outline: rgb(84, 84, 84) none 0px;
padding: 0px;
}/*#UL_6*/
#LI_7 {
color: rgb(181, 96, 0);
height: 92.390625px;
min-height: 92.3999938964844px;
width: 283.921875px;
perspective-origin: 149.421875px 47.1875px;
transform-origin: 149.421875px 47.1875px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(181, 96, 0);
border-right: 0px none rgb(181, 96, 0);
border-bottom: 2px solid rgb(240, 240, 240);
border-left: 0px none rgb(181, 96, 0);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(181, 96, 0) none 0px;
padding: 0px 0px 0px 14.9375px;
}/*#LI_7*/
#A_8, #A_15, #A_22 {
color: rgb(0, 136, 204);
text-align: left;
text-decoration: none;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(0, 136, 204) none 0px;
}/*#A_8, #A_15, #A_22*/
#DIV_9, #DIV_16, #DIV_23 {
color: rgb(0, 136, 204);
display: inline-block;
height: 73.390625px;
text-align: left;
width: 232.8125px;
perspective-origin: 116.40625px 36.6875px;
transform-origin: 116.40625px 36.6875px;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(0, 136, 204) none 0px;
}/*#DIV_9, #DIV_16, #DIV_23*/
#H2_10 {
color: rgb(181, 96, 0);
height: 39px;
text-align: left;
text-rendering: optimizelegibility;
width: 220.21875px;
perspective-origin: 110.109375px 19.5px;
transform-origin: 110.109375px 19.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(181, 96, 0);
font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 0px 12.5999994277954px 0px 0px;
outline: rgb(181, 96, 0) none 0px;
}/*#H2_10*/
#P_11, #P_18, #P_25 {
color: rgb(84, 84, 84);
height: 26px;
text-align: left;
width: 232.8125px;
perspective-origin: 116.40625px 13px;
transform-origin: 116.40625px 13px;
border: 0px none rgb(84, 84, 84);
font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 0px 0px 8.39999961853027px;
outline: rgb(84, 84, 84) none 0px;
}/*#P_11, #P_18, #P_25*/
#DIV_12 {
background-position: 0px 0px;
color: rgb(0, 136, 204);
float: right;
height: 35px;
text-align: left;
width: 28.390625px;
perspective-origin: 14.1875px 17.5px;
transform-origin: 14.1875px 17.5px;
background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ong-mobile-43x43.png) no-repeat scroll 0px 0px / 90% padding-box border-box;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 25px 8.39999961853027px 0px 0px;
outline: rgb(0, 136, 204) none 0px;
}/*#DIV_12*/
#IMG_13, #IMG_20, #IMG_27 {
color: rgb(0, 136, 204);
height: 1px;
max-width: 100%;
text-align: left;
vertical-align: middle;
width: 1px;
perspective-origin: 0.5px 0.5px;
transform-origin: 0.5px 0.5px;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(0, 136, 204) none 0px;
}/*#IMG_13, #IMG_20, #IMG_27*/
#LI_14 {
color: rgb(0, 128, 171);
height: 92.390625px;
min-height: 92.3999938964844px;
width: 283.921875px;
perspective-origin: 149.421875px 47.1875px;
transform-origin: 149.421875px 47.1875px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(0, 128, 171);
border-right: 0px none rgb(0, 128, 171);
border-bottom: 2px solid rgb(240, 240, 240);
border-left: 0px none rgb(0, 128, 171);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(0, 128, 171) none 0px;
padding: 0px 0px 0px 14.9375px;
}/*#LI_14*/
#H2_17 {
color: rgb(0, 128, 171);
height: 39px;
text-align: left;
text-rendering: optimizelegibility;
width: 220.21875px;
perspective-origin: 110.109375px 19.5px;
transform-origin: 110.109375px 19.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(0, 128, 171);
font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 0px 12.5999994277954px 0px 0px;
outline: rgb(0, 128, 171) none 0px;
}/*#H2_17*/
#DIV_19 {
background-position: 0px 0px;
color: rgb(0, 136, 204);
float: right;
height: 35px;
text-align: left;
width: 28.390625px;
perspective-origin: 14.1875px 17.5px;
transform-origin: 14.1875px 17.5px;
background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-blu-mobile-43x43.png) no-repeat scroll 0px 0px / 90% padding-box border-box;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 25px 8.39999961853027px 0px 0px;
outline: rgb(0, 136, 204) none 0px;
}/*#DIV_19*/
#LI_21 {
color: rgb(96, 128, 24);
height: 92.390625px;
min-height: 92.3999938964844px;
width: 283.921875px;
perspective-origin: 149.421875px 47.1875px;
transform-origin: 149.421875px 47.1875px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(96, 128, 24);
border-right: 0px none rgb(96, 128, 24);
border-bottom: 2px solid rgb(240, 240, 240);
border-left: 0px none rgb(96, 128, 24);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
outline: rgb(96, 128, 24) none 0px;
padding: 0px 0px 0px 14.9375px;
}/*#LI_21*/
#H2_24 {
color: rgb(96, 128, 24);
height: 39px;
text-align: left;
text-rendering: optimizelegibility;
width: 220.21875px;
perspective-origin: 110.109375px 19.5px;
transform-origin: 110.109375px 19.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(96, 128, 24);
font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 0px 12.5999994277954px 0px 0px;
outline: rgb(96, 128, 24) none 0px;
}/*#H2_24*/
#DIV_26 {
background-position: 0px 0px;
color: rgb(0, 136, 204);
float: right;
height: 35px;
text-align: left;
width: 28.390625px;
perspective-origin: 14.1875px 17.5px;
transform-origin: 14.1875px 17.5px;
background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-grn-mobile-43x43.png) no-repeat scroll 0px 0px / 90% padding-box border-box;
border: 0px none rgb(0, 136, 204);
font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 25px 8.39999961853027px 0px 0px;
outline: rgb(0, 136, 204) none 0px;
}/*#DIV_26*/
<aside id="ASIDE_1">
<div id="DIV_2">
<div id="DIV_3">
<img alt="Male Teen" src="http://www.battalha.com/up/pic/2.1%20smoke%20effect.jpg" id="IMG_4" />
</div>
</div>
<div id="DIV_5">
<ul id="UL_6">
<li id="LI_7">
<div id="DIV_9">
<h2 id="H2_10">
Live a smokefree life
</h2>
<p id="P_11">
Discover the rewards of quitting
</p>
</div>
<div id="DIV_12">
<img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_13" />
</div>
</li>
<li id="LI_14">
<div id="DIV_16">
<h2 id="H2_17">
Craving cigarettes?
</h2>
<p id="P_18">
Get tips for when the urge hits
</p>
</div>
<div id="DIV_19">
<img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_20" />
</div>
</li>
<li id="LI_21">
<div id="DIV_23">
<h2 id="H2_24">
Quitting today?
</h2>
<p id="P_25">
Review steps for your quit day
</p>
</div>
<div id="DIV_26">
<img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_27" />
</div>
</li>
</ul>
</div>
</aside>

If you look into the source of the page you linked to, the CSS rules that are being applied that change the background color and text color are as follows:
.li-first:hover,
.li-first:hover H2,
.li-first:hover A,
.li-first:hover A:visited H2 {
background:none repeat scroll 0 0 #b56000;
color:#ffffff;
}
...
.li-second:hover,
.li-second:hover H2,
.li-second:hover A,
.li-second:hover A:visited H2 {
background: none repeat scroll 0 0 #0080ab;
color: #ffffff;
}
...
.li-third:hover,
.li-third:hover H2,
.li-third:hover A,
.li-third:hover A:visited H2 {
background: none repeat scroll 0 0 #608018;
color: #ffffff;
}
So what's actually happening is the li element itself is having its background color changed (to a different color for each of the three li elements), and the descendent elements that have text content are having both their background color and text color changed as well (text to white).
You can apply the same design to your code, taking into account the differences between your code and the site code:
#LI_7:hover, #LI_7:hover h2, #LI_7:hover p { background-color:#b56000; color:#ffffff; }
#LI_14:hover, #LI_14:hover h2, #LI_14:hover p { background-color:#0080ab; color:#ffffff; }
#LI_21:hover, #LI_21:hover h2, #LI_21:hover p { background-color:#608018; color:#ffffff; }
http://jsfiddle.net/9juf1nLf/
Edit: Sorry, I didn't notice that the image had changed! After some investigation, this is the CSS rule that's changing the image:
.li-first:hover .image-note,
.li-second:hover .image-note,
.li-third:hover .image-note {
background: url("../images/content/smokefree-content-page-related-link-ro-mobile-43x43.png") no-repeat scroll 0 0 / 90% auto transparent;
}
So what's happening is that they're replacing the entire image with an alternative one when you hover over the li. It's also a bit strange, as the .image-note class is actually being applied to a div that contains an img element. The img element is just applying a blank spacer, while the div is actually showing the visible image as its background image.
Also interesting is that they're using the exact same hover image for all three lis. This works because although the image needs to be colored differently when you're not hovering over it, when you are hovering over it, it's just the same plain white image for all three lis.
For comparison, here's the first colored image compared to the common white image:
http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ong-mobile-43x43.png
http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ro-mobile-43x43.png
Anyway, you can apply this to your code as well with the following:
#LI_7:hover #DIV_12, #LI_14:hover #DIV_19, #LI_21:hover #DIV_26 { background-image:url('http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ro-mobile-43x43.png'); }
http://jsfiddle.net/9juf1nLf/2/

From Chrome's 'inspect element' it would appear that the list is using CSS :hover selector.
.li_foo:hover {
background: #B56000;color: #FFFFFF;}
More info: http://www.w3schools.com/cssref/sel_hover.asp