Kevin Aartsen Kevin Aartsen - 1 month ago 19
CSS Question

Footer columns not working

I have a footer inside this i have 2 divs column 1 and column 2

I added a max width and display inline hoping the result would be like this:

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


But when i add a long string everything goes out of place i even added break-word, did i miss something here?

HTML-Part:

<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-Part:

.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

First of all, inline elements don't work as you expected. Needs to be display: inline-block all columns.

The other side is word-wrap, that you need word-break : break-all.

With these two changes it works perfectly:

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

Comments