Lucy Posted July 5, 2014 Share Posted July 5, 2014 I'm having a problem with the basic design for a responsive website. I will post the code below. The website normally looks like this: https://imageshack.com/i/n1qsk1j When the browser is made very small, so the larger text overflows, that text goes beneath its own div and past the footer underneath, into a white space, like so: https://imageshack.com/i/ms8fdjj I would like the main part to extend to accomodate the extra text, though I suppose it may simply not be possible, in which case I'll have to link in a stylesheet for screen sizes below a certain height, or something. Would be grateful for any help HTML: <body> <div id="main"> <div class="hometext">sample text<br> (more text)</div> </div> <div id="footer"> ♦ <a href="">about</a> ♦ <a href="">portfolio</a> ♦ <a href="">contact</a> ♦ </div> </body> CSS: *{ margin:0;padding:0; } html, body { margin:0; height:100%; font-size:62.5%; } a:link, a:visited, a:active { text-decoration:none; color:inherit; } a:hover { text-decoration:none; color:#CDFAFF; } #main { background-color:#E6FDFF; background-image:url('images/dia.png'); background-repeat:no-repeat; color:#B28A6C; height:94.2%; font-family: "Lucida Bright", "DejaVu Serif", Georgia, serif; font-size:7em; margin:0; } #footer { width:98.65%; text-align:center; margin:0; padding:.7%; height:3%; min-height:26px; word-spacing:2.5em; background-color:#B28A6C; font-family: "Lucida Bright", "DejaVu Serif", Georgia, serif; color:#FFE2CD; font-size:3em; } .hometext { top:30%; left:30%; max-width:30%; min-width:25%; margin:0; padding:5%; position:relative;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 5, 2014 Share Posted July 5, 2014 1) Using position relative is a bad idea, it would add 30% at top to height of total content. 2) Using height: 94.2%, will be the height of browser viewport area, it won't grow with text if text extends beyond this fixed 94.2%, try using min-height: instead. Link to comment Share on other sites More sharing options...
Lucy Posted July 8, 2014 Author Share Posted July 8, 2014 Thanks for the reply, that worked! There is a small problem... I added in a box of text with float:right property which seems to have completely stopped the main part it is in from resizing, as before. It is instead forcing the footer to resize. I hope this makes sense, I'm so tired I could fall asleep right now Link to comment Share on other sites More sharing options...
dsonesuk Posted July 8, 2014 Share Posted July 8, 2014 try adding overflow:hidden to #main and see if that helps. Link to comment Share on other sites More sharing options...
Lucy Posted July 8, 2014 Author Share Posted July 8, 2014 (edited) Well, it stops going inside the footer, but instead creates extra white space inbetween the main part and the footer. Edit - never mind - I had accidently put the code in the footer, lol. Thanks a lot! Edited July 8, 2014 by Lucy 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