Member Avatar for ablitz

I have a problem with LABEL followed by P tag.

form#two p {
	display: inline;
	margin-bottom: 10px;
	width:200px;
}
form#two label {
	display: block;
	float: left;
	width: 100px;
	margin-bottom: 10px;
	width: 12em;
	padding-right: 5px;
	font-weight: bold;
	text-align: right;
	color: #AB0101;
}

My goal is to get LABEL and P contents displayed on the same line. It works fine in firefox but doesnt in IE6. Can some1 pls help me out? and make it work in IE6? Cheers

  • 1 Contributor
  • 1 Reply
  • 131 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ablitz

Dani AI

Generated

Short summary: the layout break was caused by a clearing rule on the paragraph, which forced it under the floated label. found and removed that clear, which fixed the issue. Below are practical fixes and IE6-specific notes that help avoid the same trap and make label+field sit on one line consistently.

Clear vs float behavior
The clear property prevents an element from sitting beside floated siblings — it will drop below them. That’s exactly why a cleared p ended up on a new line. Different browsers can show small layout differences around floats and inline elements, so the safe approach is to make the right-hand element explicitly participate in the float/inline layout instead of relying on display:inline + width behavior.

Two reliable approaches

  • Float both elements (label and the field) so they naturally share a row and widths behave consistently.
  • Use inline-block for the right-side element and provide the IE6 fallback that triggers hasLayout.

Example: float-both approach

label.field { float: left; width: 12em; text-align: right; margin-right: .5em; }
div.value  { float: left; width: 200px; margin-bottom: 10px; }

Example: inline-block with IE6 fallback

.value { display: inline-block; width: 200px; vertical-align: middle; }
* html .value { display: inline; zoom: 1; } /* IE6: give hasLayout so inline behaves like inline-block */

Troubleshooting tips
Temporarily remove suspected rules (clear, floats) to see which one forces the break. If using floats, ensure the parent clears them (clearfix, overflow, or hasLayout) so subsequent content doesn’t collapse. Prefer semantic inline elements (span) for truly inline content; use conditional CSS only when supporting legacy IE.

Member Avatar for ablitz

I have a problem with LABEL followed by P tag.

form#two p {
	display: inline;
	margin-bottom: 10px;
	width:200px;
}
form#two label {
	display: block;
	float: left;
	width: 100px;
	margin-bottom: 10px;
	width: 12em;
	padding-right: 5px;
	font-weight: bold;
	text-align: right;
	color: #AB0101;
}

My goal is to get LABEL and P contents displayed on the same line. It works fine in firefox but doesnt in IE6. Can some1 pls help me out? and make it work in IE6? Cheers

my problem was i had an extra clear:left under P;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.