Floated Text Alignment Issue

HTML & CSS
1

On my website, a Private Message has a “Top Bar” and a “Bottom Bar” around it which contain Buttons and Links related to the PM.

(Normally, the Buttons/Links are identical between the Top/Bottom Bars.)

Each Bar has a link which allows the User to return to the PM Folder associated with the PM (e.g. Inbox).

To place this link on the far right side, I chose Float: Right.

Simple enough.

But here is the problem…

When a User is viewing a PM in the Trash Folder, I decided I only want a Button on the Bottom Bar, because I want to make it a little more difficult for someone to Permanently Delete a PM. (And the assumption is that after they have read the “Deleted PM”, then they would see the “Permanently Delete” button after the PM and if they click on that, then they must have really meant that?!)

The problem…

Because I don’t have any Buttons in my Top Bar in this scenario, it is screwing up my “Bar Height” because the only thing in the Bar is a Floated Link.

Here is a mockup of what I have… (Just for you, Ralph!!) :wink:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->

	<!-- Page Stylesheets -->
	<style>
		fieldset{
			border: 1.5px solid #AAA;	/**/
		}

		#viewPM{
			width: 640px;
			margin: 0 auto;
			padding: 30px 0 30px 0;
		}

		#viewPM{
			width: 760px;
		}

		#viewPM fieldset{
			padding: 30px 50px 50px 50px;
		}

		#viewPM legend{
			margin: 0 0 0 -1em;
		}

		#msgWrapper{
			border: 1.5px solid #D7D3FF;	/**/
		}

		#msgBarTop,
		#msgBarBottom{
			margin: 0 0 20px 0;
			min-height: 15px;		/**/
			padding: 0.8em 1em 0.7em 0.7em;
			background-color: #D7D3FF;
		}

		#msgBarBottom{
			margin: 50px 0 0 0;
		}

		#msgBarTop input,
		#msgBarBottom input{
			margin: 0 0 0 0;
			padding: 0;
			font-size: 0.9em;
		}

		#msgBarTop input#perDel,
		#msgBarBottom input#permDel{
			font-weight: bold;
			color: #F00;
		}

		#msgBarTop a,
		#msgBarBottom a{
			float: right;
			line-height: 25px;
		}

	</style>
</head>

<body>
	<form id="viewPM" action="" method="post">
		<fieldset>
			<legend>Viewing Deleted PM</legend>
			<div id='msgWrapper'>

				<div id='msgBarTop'>
					<a id='returnToInbox' href=''>Trash Folder</a>
				</div>
				<dl>
				</dl>
				
				<!-- Message goes here -->
				
				<div id='msgBarBottom'>
					<input id='permDel' type='submit' name='submit' value='Permanently Delete' />
					<a id='returnToInbox' href=''>Trash Folder</a>
				</div>

			</div>
		</fieldset>
	</form>
</body>
</html>

I am trying to make it so that whether a Bar has both Buttons and a Hyperlink - or just a Hyperlink - that the Bar Height and positioning of things inside it remain the same!!

As it stands now, if I fix the lone Hyperlink in the Top Bar, it breaks the Hyperlink in the Bottom Bar, and visa-versa?!

Is there some way to fix this?

Sincerely,

Debbie

P.S. My CSS is pretty messy these days… (I know this!!) Hopefully you can work with the structure - or lack thereof - that I have?!

2

Hi Debbie,

If you contain the floats the elements will be the same.

e.g.


#msgBarTop,  #msgBarBottom {
	margin: 0 0 20px 0;
	min-height: 15px;		/**/
	padding: 0.8em 1em 0.7em 0.7em;
	background-color: #D7D3FF;
	overflow:hidden;/* contain floats ie8+ */
       zoom:1.0;/* contain floats ie7-  */
}

The overflow:hidden will contain the floats and allow the background to stretch properly around the floated content. If you need visible overflow in those bars then don’t use overflow:hidden but use the clearfix technique instead.


#msgBarTop:after, #msgBarBottom:after {
	content:".";
	visibility:hidden;
	display:block;
	clear:both;
	height:0;
}
#msgBarTop:after, #msgBarBottom:after {zoom:1.0}
3

You never cease to amaze me!!

Thanks for the help!! :tup:

Sincerely,

Debbie