mobile-friendly site - problem with different screen widths

[Bert Coules]

I've searched around for the answer to this, but with no luck so far.

 

I've been putting together a separate mobile-friendly version of my site and the results are experimentally online at http://www.bertcoules.co.uk/test/ . Index.php is just a plain menu but a problem arises with all the other pages. When viewed on a mobile or with the desktop window narrowed they look OK:

 

 

But when the screen is widened, this happens:

 

 

I suppose it's unlikely that this version of the site will be viewed on screens wide enough to break the layout, but I'd like to keep it looking right nonetheless. I don't mind the header and the menu buttons remaining fixed-size at the left, but I don't like the gap between the text box and the footer. I need a way to keep the text box at least as high as the image, or alternatively to prevent the image zooming to a greater height than the text box.

 

The images for all pages are saved at 175 x 400px, and the formatting for the text box is:

#text_box  {    height: auto;    margin: 0;    padding: 0.8em 0.8em 0 1em;    border: 0;    font-size: 1em;    line-height: 1.4;    background: #E5E5E5; /* near-white */}

There is a different amount of text on each page, hence the height:auto. I'm sure the solution to this is straightforward but I can't see it, and any advice would be appreciated. Many thanks.

Edited December 4, 2014 by Bert Coules

[Ingolme]

Give a min-height to the box that's equal to the height of the image.

[Bert Coules]

Thanks, I'll try that.

 

Edited to add:

 

It didn't work, for some reason. But in trying to work out why, I suddenly saw how to solve the problem by moving the footer to inside the text box rather than following it.

 

Thanks for your help.

Edited December 4, 2014 by Bert Coules

[dsonesuk]

You don't need to do that, you just have to make the outer container detect the area of floated element within it by using overflow: hidden;

 

#full_width {

background: none repeat scroll 0 0 #E5E5E5;

border: 0 none;

clear: both;

font-size: 1em;

height: auto;

line-height: 1.4;

margin-left: 1em;

max-width: 90%;

overflow: hidden; /*added by dsonesuk*/

padding-bottom: 0;

padding-top: 0;

}

[Bert Coules]

Thanks. A neater alternative than changing all the page files (though I've already done that, and it does work) so I'll try it.