Jump to content

Div isn't resizing to accomodate text


Lucy
 Share

Recommended Posts

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

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

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

Link to comment
Share on other sites

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 by Lucy
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...