How to have Flex Child Anchored Right - html
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>
Related
how to let nav menu overflow on main div
I created basic html page with horizontal menu with submenu in nav.
I would like to allow submenu open and be usable at main area, but nav resizes moving main down.
I tried overflow options, but without success (no effetcs). I tried absolute position for main,but then submenu cannot be used (when I move cursor to submenu it disappears), although it is shown as I wish. Code below. Thanks for answers.
header {
background-color: rgb(200, 200, 200);
border-radius: 1px;
color: white;
text-align: center;
padding: 1px;
width: 1480px;
height: 70px;
}
nav.horizontal {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 50px;
resize: none;
}
main {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 600px;
}
nav.horizontal>li {
list-style-type: none;
float: left;
}
nav.horizontal>li>ul {
list-style-type: none;
display: none;
margin: 0;
padding: 0;
}
nav.horizontal li:hover>ul {
display: block;
}
nav.horizontal>li>ul>a {
background-color: rgb(255, 255, 0);
background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(0, 0, 0);
display: block;
font-size: .65rem;
width: 180px;
height: 30px;
letter-spacing: .1rem;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
cursor: pointer;
}
nav.horizontal>li>a {
background-color: rgb(255, 255, 5);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(255, 255, 255);
display: block;
font-size: .85rem;
font-weight: 500;
width: 211px;
height: 50px;
letter-spacing: .1rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.horizontal>li>a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
<body>
<header>Title</header>
<nav class="horizontal">
<li>
Menu
<ul>
First
Second
Third
Fourth
</ul>
</li>
</nav>
<main>
</main>
<footer>
</footer>
</body>
Try to add to your nav.horizontal > li > ul (subnav) position: absolute; Be safe and use ul & li always like: <ul> <li></li> </ul> You can always check your Markup here (https://validator.w3.org/)
Since MDN states that
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
I would wrap the <li> inside nav.horizontal in <ul> and then add correct positioning (position: relative; for the parent and position: absolute; for the child). Also in your case you might like to set parent's paddings&margins to 0. Check it out:
header {
background-color: rgb(200,200,200);
border-radius: 1px;
color:white;
text-align:center;
padding:1px;
width: 1480px;
height: 70px;
}
nav.horizontal {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 50px;
resize:none;
}
main {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
overflow: hidden;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 600px;
}
nav.horizontal > ul {
margin: 0;
padding: 0;
}
nav.horizontal > ul > li { // our parent element
list-style-type: none;
float: left;
position: relative;
}
nav.horizontal > ul > li > ul { // our child elemnt
list-style-type: none;
display:none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
nav.horizontal ul li:hover > ul {
display: block;
}
nav.horizontal > ul > li > ul > a {
background-color: rgb(255, 255, 0);
background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(0,0,0);
display: block;
font-size: .65rem;
width: 180px;
height: 30px;
letter-spacing: .1rem;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
cursor: pointer;
}
nav.horizontal > ul > li > a {
background-color: rgb(255, 255, 5);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(255,255,255);
display: block;
font-size: .85rem;
font-weight: 500;
width: 211px;
height: 50px;
letter-spacing: .1rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.horizontal > ul > li > a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
<header>Title</header>
<nav class="horizontal">
<ul>
<li>
Menu
<ul>
First
Second
Third
Fourth
</ul>
</li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
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>
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.
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/
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
Can't vertically align two divs
So I'm trying to align 2 divs side by side. Here's my markup
<div id="DIV_1">
<div id="DIV_2">
</div>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
0
</div>
<div id="DIV_6">
Likes
</div>
</div>
<div id="DIV_7">
<div id="DIV_8">
1
</div>
<div id="DIV_10">
Followers
</div>
</div>
</div>
</div>
And my CSS
#DIV_1 {
height: 81px;
width: 864px;
perspective-origin: 432px 40.5px;
transform-origin: 432px 40.5px;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_1*/
#DIV_2 {
height: 40px;
width: 40px;
perspective-origin: 20px 20px;
transform-origin: 20px 20px;
background: rgb(0, 157, 255) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_2*/
#DIV_3 {
height: 41px;
text-align: center;
width: 187px;
perspective-origin: 93.5px 20.5px;
transform-origin: 93.5px 20.5px;
font: normal normal normal 16px/normal sans-serif;
margin: 0px 338.5px;
}/*#DIV_3*/
#DIV_4 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 92px;
perspective-origin: 46.5px 20.5px;
transform-origin: 46.5px 20.5px;
border-top: 0px none rgb(70, 70, 70);
border-right: 1px solid rgb(146, 146, 146);
border-bottom: 0px none rgb(70, 70, 70);
border-left: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_4*/
#DIV_5 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8.5px;
transform-origin: 46px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_5*/
#DIV_6 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8px;
transform-origin: 46px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_6*/
#DIV_7 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 94px;
perspective-origin: 47px 20.5px;
transform-origin: 47px 20.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_7*/
#DIV_8 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8.5px;
transform-origin: 47px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_8*/
#A_9 {
color: rgb(102, 153, 255);
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(102, 153, 255);
border: 0px none rgb(102, 153, 255);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(102, 153, 255) none 0px;
}/*#A_9*/
#DIV_10 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8px;
transform-origin: 47px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_10*/
I've tried changing the display and everything. For some reason I just can't get the square to be vertically aligned with the other following count. Also here's a demo http://jsfiddle.net/z6jAA/1/
Add display: inline-block on #DIV_2 and #DIV_3, and remove the margin on #DIV_3. Fiddle: http://jsfiddle.net/z6jAA/2/
Have you tried using the following properties and values for the CSS declaration?
#idName { float: left; position: relative; }
Code example:
HTML
<div id="div1">bla </div>
<div id="div2"> bla2</div>
CSS
#div1 {
float: left;
position: relative;
}
#div2 {
float: left;
position: relative;
}