Floating buttons inside a H2

[elementalgrace]

Hi All,I am trying to create this :and have hit a bit of an issue. When I try to float the Apply Now button to the right, it slips off onto another line, and I can't seem to find a way to make it behave (except in Opera). If anyone would be kind enough to have a look and see why this might be happening or suggest a better way of doing it, then please by all means feel free to post a suggestion. My code is below:CSS

.vacancies{background-color:#dcdada; border:1px solid #cccccc; min-height: 300px;margin: 0 10px 10px 10px; padding:10px;}.apply{float:right;}.vacancy h2{border-bottom:1px solid #022c74;}input.submit{width:100px;background: url(images/submit-bg.gif) repeat-x; color:#fff; height:22px; border:none;}

HTML

<div class="vacancies"><h1>Vacancies with XXXXX</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam placerat. Fusce nec tellus. Morbi euismod. Pellentesque risus lectus, tempor id, varius nec, semper sit amet, mi.</p><div class="vacancy"><h2>Branch Manager <input type="submit" name="btnApply1" value="Apply" id="btnApply1" title="Apply Now" class="apply submit"/><div class="clear"></div></h2><p><b>Employer:</b> A Bank PLC | <b>Location:</b> Bicester | <b>Expected Salary:</b> £324,000</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id risus id metus imperdiet consequat. Pellentesque sollicitudin. Sed accumsan, risus in lobortis blandit, nulla ante suscipit leo, dapibus tincidunt ipsum odio ac justo. <a href="#"><img src="images/readmore.gif" /></a></p></div></div>

[jeffman]

Your title says a lot of the problem. I'm not going to check for others, because this is huge.Basically, a heading tag holds a heading and nothing else. You don't put images in there, inputs, buttons, and certainly not divs. Just text, plain and simple. (Maybe a <span> or an <em> tag, but those are text modifiers, so it's okay.)Now, you could change your <h2> section into a <div>. Then change the job title into a <label> (styled in CSS) and float it to the left. Then float your <button> to the right. You're already doing some of this, but the <h2> has got to be making things weird in ways I can't predict.I haven't tried these changes to your markup, but they sound right, or close enough that you could experiment from there.

[jlhaslip]

Try giving the H2 a width narrow enough to let the floated-right button fit on the line... untested.

[elementalgrace]

Try giving the H2 a width narrow enough to let the floated-right button fit on the line... untested.

That does work - thanks. I can't set the h2 to have a bottom border but that's fixable.Dierdre's Dad - I agree with you - it probably shouldn't have the button included inside it. The problem is that structurally, it is correct to use the Heading tags for the job titles (I would say anyway), and it does assist with the search engine friendliness of the vacancies, which of course is something to consider. Ho hum.Thanks.

[Synook]

Dierdre's Dad - I agree with you - it probably shouldn't have the button included inside it. The problem is that structurally, it is correct to use the Heading tags for the job titles (I would say anyway), and it does assist with the search engine friendliness of the vacancies, which of course is something to consider. Ho hum.

Semantically correct and valid:

<div><h2></h2><input /></div>

make the h2 display:inline if you have to.