Home/ Questions/Q 6185581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:44:23+00:00

Here is the html: <body> <div id=container> <div id=banner> </div> <div id=navigation> <a href=index.html><img

  • 0

Here is the html:

<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<a href="index.html"><img src="images/front_end/nav_home.png" alt="Home" /></a><a href="portfolio.html"><img src="images/front_end/nav_portfolio.png" alt="Portfolio" /></a><a href="about.html"><img src="images/front_end/nav_about.png" alt="About" /></a><a     href="contact.html"><img src="images/front_end/nav_contact.png" alt="Contact" /></a>
</div>

<div id="content">
<div id="title">
Contact
</div>

<form id="emailform" method="POST" action="">
<label for="name">Name: </label><input class="inputs" type="text" name="name" />
<p><label for="email">Email: </label><input class="inputs" type="text" name="email" /></p>
<p><label for="phone">Phone: </label><input class="inputs" type="text" name="phone" /></p>
<p><label for="message">Your Message: </label><textarea id="largemessage" name="message"></textarea></p>
<input type="submit" id="submit" value="Send Message"/>
</form>

</div>

and the CSS:

body {
background-color: #111014;
background-image: url("images/front_end/bg.png");
background-repeat: repeat-x;
}

#container {
height: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
}

#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/front_end/bannerbg.png");
}

#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}

#content {
background-image: url("images/front_end/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 1000px;
padding-left:80px;
padding-right:60px;
padding-bottom: 20px;
margin-bottom: -8px;
}

#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/front_end/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}

#emailform {
color: #dad8df;
font-family: tahoma;
}

.inputs {
float: right;
margin-right: 675px;
width: 200px;
font: .9em tahoma;
}

#largemessage {
float: right;
clear: both;
margin-right: 175px;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}

#submit {
margin-right: 175px;
clear: both;
float: right;
}

and a picture of what is happening:

A link to a picture of what is happening is here: The Picture

I realise i have really given you a heap of stuff to sort through but I have looked multiple times and just can’t figure it out.

Thanks for the help in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason that the textarea and submit button doesn’t affect the height of the form is that they are floating.

    You can use the overflow style to make the form contain floating elements also:

    #emailform {
  color: #dad8df;
  font-family: tahoma;
  overflow: hidden;
}

    (What setting you use for overflow doesn’t matter as you haven’t specified a size for the element.)

    • 0