Footer колонки не работают

Question

У меня есть подвал внутри этого я 2 дивы колонки 1 и колонки 2

Я добавил максимальную ширину и отображение встроенных в надежде результат будет выглядеть так:

----------------------------- 
|aaaaaaaaaaaaa|aaaaaaaaaaaaa| 
|aaaaaaaaaaaaa|aaaaaaaaaaaaa| 
|aaaaaaaaaaaaa|aaaaaaaaaaaaa| 
----------------------------- 

Но когда я добавляю длинную строку, все идет неуместно, я даже добавил слово, я что-то пропустил?

HTML-часть:

<div id='generated_footer_date' style='background-color:$backgroundColor; color:$fontColor; opacity: $opacity; height:auto;'> 
    <div class='column1of2'>ddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfd</div> 
    <div class='column2of2'>column2of2ddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfdddfd</div> 
</div> 

CSS-часть:

.column1of2 { 
    display: inline; 
    word-wrap: break-word; 
    height: auto; 
    width: 200px !important; 
    height: auto; 
    padding-right: 20%; 
} 

.column2of2 { 
    display:inline; 
    word-wrap: break-word; 
    height:auto; 
    width:200px; 
} 

#generated_footer_date { 
    color:#ffffff; 
    background-color:black; 
    opacity: 1; 
    width:100%; 
    text-align:center; 
    padding-top:15px; 
    padding-bottom:15px; 
    word-wrap: break-word; 
    height:50px auto; 
    font-family: 'Raleway', sans-serif; 
} 

https://jsfiddle.net/wzfyj2z4/1/

Answer 1

Прежде всего, встроенные элементы не работают, как вы ожидали. Нужно быть display: inline-block все столбцы.

Другая сторона word-wrap, что вам нужно word-break : break-all.

С этими двумя пересадками он прекрасно работает:

https://jsfiddle.net/wzfyj2z4/2/

Answer 2

Попробуйте CSS,

.column1of2 { 
float:left; 
word-wrap: break-word; 
height: auto; 
width: 200px !important; 
height: auto; 
padding-right: 20%; 
} 

.column2of2 { 
float:left; 
word-wrap: break-word; 
    height:auto; 
    width:200px; 
} 

#generated_footer_date { 
float:left; 
color:#ffffff; 
background-color:black; 
opacity: 1; 
width:100%; 
text-align:center; 
padding-top:15px; 
padding-bottom:15px; 
word-wrap: break-word; 
height:50px auto; 
font-family: 'Raleway', sans-serif; 
} 

https://jsfiddle.net/kushan/pyf5s0L8/

Answer 3

Используйте ниже CSS для обоих class.Hope Это помогает , , , ,

display:inline-block; 
position:relative;