Jump to content

Div content not resizing parent div


Guest Stusi
 Share

Recommended Posts

Guest Stusi

I have a contact page with some basic info, then a contact form. The form i put inside a div and it seems the div is not resizing the parent div (it's my content div) so the form is just cut off by the footer and continues past the bottom of the page. The only way to get the HTML to resize for the div properly is just inserting a bunch of <br> tags to extend the page past the end of the div (ghetto). Heres the code...

<body>  		<div id=container>						<div id=header>							</div>								<div id=linkbar>								<img src="images/linkbar.jpg" img border="none"					width="800" height="37" 					usemap="#links">					<map id="links" name="links">					<area shape="rect" coords="76,6,208,33" alt="About Us"					href="about.htm">											<area shape="rect" coords="209,6,302,33" alt="Mats"					href="mats.htm">											<area shape="rect" coords="303,6,414,33" alt="Frames"					href="frames.htm">											<area shape="rect" coords="415,6,593,33" alt="Swap Meet"					href="swapmeet.htm">											<area shape="rect" coords="594,6,724,33" alt="Contact Us"					href="contact.htm">				</div>												<div id=middle>								<div id=content> <br><h2><center>Contact Memory Mats Hawaii</center></h2>					<h4>      Phone Orders</h4>				    John & Kathleen Parker<br><br>				    Phone: (808)258-7076<br>				    Fax: (808)943-2443<br><br>				    Phone orders accepted from 9AM to 7PM HST.<br>				    Current Hawaii Time Is:  <br>								<div style="position: absolute; padding: 30px;">					<form action="MAILTO:d3stusi@gmail.com" method="post" enctype="text/plain"><h4>E-Mail Us</h4>This form will send an e-mail to Memory Mats Hawaii.  Please be sure to provideyour contact information so we can get back to you.  Thanks!<br><br>Name:<input type="text" name="name"value="" size="20"><br><br>Your E-mail:<input type="text" name="mail"value="" size="20"><br><br>Your Phone Number:<input type="text" name="mail"value="" size="20"><br><br>Contact Preference:<input type="radio" name="group1" value="E-Mail" checked> E-mail<input type="radio" name="group1" value="Phone"> Phone<br><br>If phone, what is a good time to contact you?<br>(Please use HST if you are outside of Hawaii)<br><input type="text" name="contactpreference"value="" size="20"><br><br>Comments/Questions<br><textarea rows="10" cols="30" name="comment"></textarea><br><br><input type="submit" value="Send"><input type="reset" value="Reset"></form></div>								<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>				<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>				<br><br><br><br><br><br>							</div>							</div>						<div id=footer><center><font size="-2">Copyright 2007 Memory Mats Hawaii, All rights reserved.</font></center><br></div>					</div>			</body>

Also, i get a small white line cutting the background horizontally just under my link bar. It's only in IE and i only have 6.0 or something old so maybe it works in 7. Anyone know why this happens and how to fix it? If you can/can't see what i'm talking about in IE post your version you are looking with so i know.Thanks!

Link to comment
Share on other sites

can you post the css too? is the container div floated? you may need to clear a float, they account for a lot of common display problems

Link to comment
Share on other sites

  • 2 weeks later...
can you post the css too? is the container div floated? you may need to clear a float, they account for a lot of common display problems
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>New Page 1</title></head><body><div style="position: absolute; width: 1058px; height: 100px; z-index: 1; left: 10px; top: 15px" id="Heading"></div><div style="position: absolute; width: 185px; height: 599px; z-index: 1; left: 8px; top: 121px" id="Menu"></div><div style="position: absolute; width: 867px; height: 735px; z-index: 1; left: 198px; top: 122px" id="Content"></div><div style="position: absolute; width: 1059px; height: 100px; z-index: 2; left: 6px; top: 870px" id="Footer"></div></body></html>

Basically I'm trying to achieve something similiar.... a Header at the top, a menu on the left a content section in the middle and a footer at the bottom. I'd like the menu and header and footer size to be static (not resizeable), however, the content section should be resizeable depending on the content all the while keeping the footer at the bottom. Does this make sense?

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...