How can I put a break between two elements contained by a span using css?

Answer 1

I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.

Answer 2

Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.

Answer 3

Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.

You also have a lot of extraneous tags in there. Instead of this:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    <span><em>Search</em></span>
</button>

why not just do this:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    Search
</button>

The span does nothing, and the em can be emulated through CSS:

.fancySubmitButton { font-style: italic }`

Here's what I'd do:

<form>
    <label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
    <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
    <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit">Search</button>
    <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton">Advanced</a>
</form>

with the CSS:

form {
    text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
    font-style: italic;
}
.fancyLinkButton {
    display: block;  /* this will put it on its own line */
}

Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.

Answer 4

I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of

fieldset {
    text-align: center;
    width: 100%;
    position: relative;
}

I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.

Answer 5

Why not just put a break in before the tag (
) then align the to the right?