float and display block for form elements/controls

**dresden_phoenix** · Oct 27, 2012 02:57

I was experimenting with a MINIMAL MARKUP and wanted to find a way to line up 3 from element so that they took up 100% of the width of their container. More specifically, I wanted to have 2 items have fixed widths and the other APPEAR to take up the remaining space.

This kinda thing is a a piece of cake with Normal HTML elements . I mean to do something like this you would wrap the elements float the first element one way , the second the other way and give the last corresponding horizontal margins, display:block if necessary, or use overflow:hidden.

The problem seems to be that form control don't actually become block elements when you give them "display:block". That is you still have to give them explicit width , it seems and they do don't naturally stretch to fill the container... etc. Or maybe I simply dont know how to reset them properly.

Essentially, this is what i have been toying with:

Code:

<style type="text/css">
 label, .l{float:left;  width:150px;}
 button, .r{float:right;  width:65px;}
 input, .main {display:block;  width:100%; }/*width:100% causes  elemnt to drop*/ 
 .l,.r{background: pink}
 .main{background: orange}
 .cont{clear:both }
 </style>

<div class="cont"><button>button</button><label for="text">Label</label><input type="text" name="text"></div>

<div class="cont"> 
	<div class="l">left stuff</div>
	<div class="r">right stuff</div>
	<div class="main">main stuff</div>

</div>

Yes, I could wrap each form element in a SPAN or DIV, and go from there but that would be nearly tripling the markup... I like to avoid that when I can.

Am I banging my head for nothing? Is there a way to do this or is this just another limitation of HTML/CSS?

As always, all insights into this appreciated.

**JeremyC** · Oct 27, 2012 18:36

It seems to be a limitation of css/html. You could wrap only the input element inside a span set to block and apply border-box sizing to the input to prevent it from overflowing the span while only adding 2 tags. I understand where your coming from, simplicity is good but sometimes it's not worth the frustration

**Paul O'B** · Oct 28, 2012 03:07

Yes form elements are replaced elements like images and have intrinsic dimensions so you would need to to the same process that you would for an image to stretch them which is to put them in a suitable container first. (This has the added benefit in IE7 and under and avoids the margin bug on inputs.)

I usually wrap a span around the input and give the span left and right padding to match the padding and border on the input. Then the input can be given a 100% width and dragged into the padding area of the span for a perfect fit. This avoids using box sizing and will work back to ie6.

e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 <style type="text/css">
label, .l {
	float:left;
	width:150px;
	background:#ffc;
}
button, .r {
	float:right;
	width:65px;
}
input, .main {
	display:block;
	width:100%;
}/*width:100% causes  elemnt to drop*/
span{
	display:block;
	overflow:hidden;
	padding:0 10px;
}
input{
	padding:3px 9px;
	border:1px solid red;
	width:100%;
	margin:0 0 0 -10px;	
}

.l, .r { background: pink }
.main { background: orange }
.cont { clear:both }
</style>
 </head>

 <body>
<div class="cont">
			<button>button</button>
			<label for="text">Label</label>
			<span><input type="text" name="text"></span>
	</div>
<div class="cont">
			<div class="l">left stuff</div>
			<div class="r">right stuff</div>
			<div class="main">main stuff</div>
	</div>
</body>
</html>

User Tag List

Thread: float and display block for form elements/controls

Thread Tools

Display

float and display block for form elements/controls

Bookmarks

Bookmarks

Posting Permissions