Text alignment in a div contained into a footer

Question

I can't get the text in the footer placed in the right position, just as the image below:

I've been making changes to the code from a template and now the text is in the upper part and some blank spots appear, specially on Chrome browsers:

The web is here and these are the links to the html and the css

Update: JSFiddle added.

<footer class="aligncenter">
    <div class="wrapper" id="bottom_footer">
         <h2 class="hidden">xxxx Footer</h2>

        <section>
            <div class="left_column">
                 <h4>OFICINAS CENTRALES</h4>

                <p>xxxxxxx xxxx, 35</p>
                <P>xxxx x</p>
                <p>Tlfo xxxxx Fax xxxx</p>
            </div>
            <!-- left_column-->
            <div class="mid_column"><span class="helper"></span>
                <img src="images/eccWhite_200.png" width="400" height="120" />
            </div>
            <div class="right_column">
                 <h4> xxxxx ESTRUCTURAS SL</h4>

                <p>estructuras construcciones y contratas</p>
                <p>info@xxxx</p>
            </div>
            <!--right_column-->
        </section>
        <!-- class="container"-->
    </div>
    <!-- wrapper footer-->
</footer>

Could you please show me what I'm doing wrong?

Answer 1

<footer id="footer">
                    <h2 class="hidden">Ecomir Footer</h2>
                <div class="left_column">
                                  <h4>OFICINAS CENTRALES</h4>
                                  <span>Almirantes Matos, 35</span>
                                  <span>36002 PONTEVEDRA</span>
                                  <span>Tlfo 986869940 Fax 98685362<span>
                </div><!-- left_column--> 

                <div class="right_column">
                                  <h4> ECOMIR ESTRUCTURAS SL</h4>
                                  <span>estructuras construcciones y contratas</span>
                                  <span>info@ecomir.es</span>
                </div><!--right_column-->
    </footer>

css

.hidden {
           display: none;
           visibility: hidden;
        }
#footer h4{
    line-height: 1em;
    margin:10px 0 0 0;
}
#footer{
    width: 1100px;
    height: 120px;
    position: absolute;
    bottom: 0;
    margin-left: -560px;
    left: 50%;
    background-color: #CCC;
    background-image: url(http://www.xente.mundo-r.com/turkish/ecomir_2/images/eccWhite_200.png); 
    background-repeat: no-repeat;
    background-size: 400px 120px;
    background-position: center;

}
.left_column{
    width: 200px;
    background-color: #FF0080;
    float: left;
    padding: 0 0 0 10px;
    position: absolute;
    bottom: 0;
}
.right_column{
    width: 300px;
    background-color: #FF00FF;
    right: 0;
    bottom: 0;
    position: absolute;
}

Answer 2

I would recommend against using float:left; on the left and middle column. Since your content is not likely to change significantly there is one thing I might do. Give your footer position:relative and position your .right-column with position:absolute; bottom:0; right:0;. This will ensure that your right column is far to the right, and aligned to the bottom of the footer.

Overall, the styles in the footer seem like they are trying to be 'not a table' and end up being kind of messy for it. If you want semantic markup that still behaves like a table, try http://960.gs/.

Answer 3

you can simple use this FIDDLE

I tried to solve it but stylesheet little bit messed up in my opinion, so just remove the footer at all then try to apply your footer in your own style sheet just like I created.

Be careful while choosing class names because, if there will be a overload , it will messed up again

.footer
{
    background-color:#CCCCCC;
    width:400px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    font-size:9px;
}

Answer 4

I checked the HTML version, in your code you unnecessary use section remove that first. by removing this you can remove the while space.

there are a lots of things which need to fixed ..but here is work around to vertically align the text.

.right_column
{
width: 25%; /*remove this line**/
display: inline; /*remove this line**/
}

Answer 5

Not able To fix it complete but the following point will help you a lot

1. I looked into your code not completely but found that you used margin-left property although your left right div are 25 % and center one is 50 % So there is not space for that margin . IF you remove margin-left:10px (I suppose in your code). The White lines will be removed and you can align text by setting margin-top.
2. I have not studied your whole code but not able to find clear:both property as the bottom three div float. So do that as it is a good practice and I think it will help in solving your issue
3. Either set background of section to #ccc or use padding not margin

Hope this help.....