Help with Layout

HTML & CSS
1

Hi there,

I wonder if someone could give me some assistance…

I’ll refer you to the following page: http://togevi.com/newsletter-signup-aquarius.html

This is a sign up form I am creating for a newsletter.

The rounded border you see at the top is supposed to surround the entire form, not just the logo. Could someone tell me where I have gone wrong here. This is the CSS:

div.newsletter-form {
    background-color: #FFFFFF;
    border-color: #000000;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    padding: 20px;
    position: relative;
    z-index: 10000;
    width: 600px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

And the entire contents of the form (including the logo) are contained within the <div class=“newsletter-form”> tags so I can’t understand why the border is shutting off there.

Secondly…

The subscribe button seems to be floating around in the middle of the page when it is supposed to be on the left, at the bottom of the form… Any ideas?

I’d very much appreciate any answers - I’ve been playing with this for hours now and there is clearly something obvious I am missing. Perhaps a fresh set of eyes will help point out something I should be seeing myself.

2

For the border, add overflow: hidden to the div:

div.newsletter-form {
  overflow: hidden;
}

By default, a container doesn’t wrap around floated contents, but the overflow rule changes that. :slight_smile:

For the second issue, try this:


input[type="submit"] {float: left; clear: both;}
3

Thanks - that worked a treat.
One last question. Do you know why the piece of text on the right that says “You Have Selected: Aquarius. If this is the wrong sign close the form and visit the correct star sign page to find the correct sign up form.” doesn’t have the correct line spacing? The first 2 lines are closer together than the third and final line. The CSS is


span.newsletter-form-note {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 12px;
}
4

You could just add display: block to fix that:

span.newsletter-form-note {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  [COLOR="#0000CD"]display: block;[/COLOR]
}