Bert Coules Posted December 4, 2014 Share Posted December 4, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2014 Share Posted December 4, 2014 Give a min-height to the box that's equal to the height of the image. Link to comment Share on other sites More sharing options...
Bert Coules Posted December 4, 2014 Author Share Posted December 4, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 4, 2014 Share Posted December 4, 2014 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; } Link to comment Share on other sites More sharing options...
Bert Coules Posted December 4, 2014 Author Share Posted December 4, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now