Text Alignment Problem

[BTC]

Hi,

I have been trying to solve this problem, but have had no luck. On the FAQ page, when you click on the answer to a question, the text is pushed left on the 3rd line and every line past that. I attached a screenshot showing the problem. I thought that the text was wrapping around the ":before", but I don't know? I couldn't fix it.

dl {
	overflow: hidden;
	margin-bottom: 10px;
}

dt, dd {
	float: left;
	width: 96.1666666667%; /* 577px / 600px */
	display: block;
	margin-left: 3.83333333333%; /* 23px / 600px */
}

dt:before, dd:before {
	font: bold 1.42857143em courier, monospace; /* 20px / 14px */
	padding: 2px 4px;
	-webkit-padding-before: 0; /* Webkit padding fix for padding-top */
	margin-right: 1.73310225303%; /* 10px / 577px */
	border-radius: 2px;
	moz-border-radius: 2px;
	margin-left: -3.83333333333%; /* 23px / 600px */
	float: left;
}

dt:before {
	content: "Q";
	background: #526466;
	color: #FBFBFB;
	margin-top: -3px; /* Makes the question in the vertical middle of "Q" */
}

dd:before {
	content: "A";
	color: #051517;
	background: #f2d13f;
	margin-bottom: auto;
}

dt {
	color: #051517;
	/*font-weight: bold;*/
	padding: 3px 0 15px;
}

dt:hover {
	color: #526466;
	cursor: pointer;
	text-decoration: underline;
}

dd {
	margin-bottom: 10px;
	color: #4d4d4d;
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 7px;
}

[dresden_phoenix]

You seem to have gotten it work, so I may be late to the party here.

The pseudo element before is acting as a normal floated element would. Text 'wraps' around the element; floating doesnt create a column to it's own. If that's what you want there are a few ways to do it ( one of which, btw, does away with the pseudo element itself).

Wrap your dd content ( use a span, or a div if you have block elements) and give the margin-left OR padding-left to make room for your floated icon.
OR
Wrap your dd content ( use a span, or a div if you have block elements) and give the wrap overflow:hidden;
OR
Get rid of the :before pseudo el. , place the icon as a BG graphic on the DD , add padding-left to the DD to accommodate the icon. ( I see that you are trying to use text.. but this is something to consider)
OR
Give the DD padding left approximately equal to the calculated size of the pseudo element. give the pseudo element negative margin-left equal to its own width.


Hope that helps.

[ralph.m]

I still see the behavior. If you want to stick with the :before element, I'd say make it position: absolute instead of float, then give the dd position: relative and a left margin that creates enough space for the A. Then position the A where you want it.

[BTC]

Thank you guys for your help. I was trying to avoid using images. I know the image way works well, but I was really trying to see if I could do it all with CSS. Ralph I made the changes that you recommended and it worked.

Here is the code that I used:

dt, dd {
	/*float: left;*/
	width: 94.5%; /* 567px / 600px */
	display: block;
	margin-left: 5.5%; /* 33px / 600px */
	position: relative;
}

dt:before, dd:before {
	font: bold 1.42857143em courier, monospace; /* 20px / 14px */
	padding: 2px 4px;
	-webkit-padding-before: 0; /* Webkit padding fix for padding-top */
	/*margin-right: 1.73310225303%;*/ /* 10px / 577px */
	border-radius: 2px;
	moz-border-radius: 2px;
	margin-left: -3.83333333333%; /* 23px / 600px */
	/*float: left;*/
	position: absolute;
	left: -1.66666666667%; /* -10px / 600px */
}

Thanks once again guys, I really appreciate it!