CSS alignment within a container. 3

[deadpool42]

What I want is to have a search box on the right side of the page. It should consist of a text box and a submit button on the same line, with a link on the next line lined up with the left of the text box. Here's what it would look like with tables:

<table border="0" align="right">
	<tr><td><input type="text" /> <input type="submit" /></td></tr>
	<tr><td><a href="#">Advanced Search</a></td></tr>
</table>

 

[Vragabond]

<form style="float: right;" ...>
 <p>
  <input type="text" /> <input type="submit" /><br />
  <a href="#">Advanced Search</a>
 </p>
</form>

This is an example of how it could look using css.

 

[deadpool42]

Whoops, my problem was putting each line in a <div>. Now I'm kind of curious, is it possible without the <br />? Thanks.

 

[Vragabond]

Of course it is, you would just have to think of another way to decide on line breaks. You could do two paragraphs, you could do a fieldset and a paragraph or maybe an unordered list. Ultimately, you could even define that anchor element as a block level element and it would go into the next line. Whichever solution you think is most applicable, is the one you should go with.

 

[dkdude]

You could modify Vragabond's example like this to get rid of the [tt]<br />[/tt]:

<form style="float: right;" ...>
 <p>
  [COLOR=red]<div>[/color]<input type="text" /> <input type="submit" />[COLOR=red]</div>[/color]
  <a href="#">Advanced Search</a>
 </p>
</form>

That should do the trick.

Regards

 

[deadpool42]

After some more expermentation, it seems that the float has to be declared on an inline element or else using a <div> within it will cause the whole thing to be left aligned. Could someone explain why that is to me?

 

[dkdude]

Try to post the code and we'll have a look ;-)

Regards

 

[j4606]

Hi guys, quick question reguarding p elements based on this code. On the w3c site it says that p elements cannot contain block-level elements. On other sites i found that divs are generic block-level containers. I myself have used divs inside p elements, this code seems to work, but is there a reason why the recommendation says p elements cannot contain block level elemnts? are divs included?

http://www.w3.org/TR/html4/struct/text.html#h-9.3.1

<form style="float: right;" ...>
 <p>
  <div><input type="text" /> <input type="submit" /></div>
  <a href="#">Advanced Search</a>
 </p>
</form>

 

[Vragabond]

Yup, divs should not be inside paragraphs. While div is a generic block level element and can be nested many times within itself, or many block level elements can be nested inside a div, paragraph is a specific tag that is used for a paragraph of text. That is why it can only contain text and other inline elements and not any block level elements. You can put a paragraph around inputs and another one around anchor or maybe use a list element -- hard to say what would be the most acceptable without knowing more about your code.

 

[deadpool42]

Well you learn something new every day. It is only the <p> elements that cause problems. Headers and divs work fine. Weird.