What can I improve?

[Mike Borozdin]

I have the following code:

<div style = "line-height: 1.4">
  lghjhg<br />
  lghjhg<br />
  lghjhg<br />
</div>
<div style = "position: absolute; left: 90; top: 15">
  <select>
	 <option>fghghg</option>
  </select><br />
  <input type = "text"><br />
  <input type = "text"><br />
</div>

And I think it's much better than:

<table border = "0" cellpadding = "0" cellspacing = "0">
  <tr>
	 <td width = "36%">
		lghjhg
	 </td>
	 <td>
		<select>
		   <option>fghghg</option>
		</select>
	 </td>
  </tr>
  <tr>
	 <td width = "36%">
		lghjhg
	 </td>
	 <td>
		<input type = "text"><br />
	 </td>
  </tr>
  <tr width = "36%">
	 <td>
		lghjhg
	 </td>
	 <td>
		<input type = "text"><br />
	 </td>
  </tr>
</table>

But is 'left' attribute only way to go? Or I can do it other way?

[Mike]

<div style="float: left; width: 36%;">
blah
</div>
<div style="float: right;">
  <select>
	 <option>fghghg</option>
  </select><br />
  <input type = "text"><br />
  <input type = "text"><br />
</div>

Something like that.

[BenANFA]

Couldn't you also use float: left on the second div as well ? The advantage of this is that if you wanted to simulate a 1 or more extra columns in the table you can just carry on adding

<div style="float:left">
...
</div>

until you run out of screen width.

However a problem is that across the different broswer platforms you have no guarunttee that your text height will be the same as that of the <input ... > controls.

Again would it not be better to put each separate row in it's own set of divs so that the labels line up properly with the controls better.

<div style="clear:left;float:left;width:36%">
 <label for="Ctrl1">label</label>
</div>
<div style="float:left">
 <select id="Ctrl1">
  <option>Option 1</option>
  <option>Option 2</option>
 </select>
</div>
<div style="clear:left;float:left;width:36%">
 <label for="Ctrl2">label</label>
</div>
<div style="float:left">
 <input id="Ctrl2" ...>
</div>
<div style="clear:left;float:left;width:36%">
 <label for="Ctrl3">label</label>
</div>
<div style="float:left">
 <input id="Ctrl3" ...>
</div>

The labels will at least line up with the controls although they will not be centered vertically.

[BenANFA]

Having thought about it for a bit, conceptually a stardard (but by no means the only) form layout is with 1 label and 1 control on each row of a tabular layout with the labels all the samewidth so that the left hand side of the controls line up. This givens the html as

<form action="FormLayout>html">

<div>
 <label for="Ctrl1">Select</label>
 <select multiple="multiple" id="Ctrl1" name="Ctrl1">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
 <select>
</div>

<div>
 <label for="Ctrl2">Checkbox</label>
 <input id="Ctrl2" name="Ctrl2" type="checkbox" />
</div>

<div>
 <label for="Ctrl3">Text</label>
 <input id="Ctrl3" name="Ctrl3" type="text" />
</div>

</form>

A div for each row of the form which consists of a label and a control.

You then use CSS to adjust the label properties so that the controls line up and to adjust the div properties so that the form is formated for easy use.

<style>
form {
	border-bottom: 1px solid #ccc;
}

form div {
	border-top: 1px solid #ccc;
	margin: 0px;
	padding: 3px 0px;
}

form div label {
	width:36%;
	vertical-align:top;
}
</style>

We set padding/margins/borders on the div to space and deliniate the form (note set final bottom border of the form element). The label element then has the required width, and vertical-alignment set so that the label appears at the required place.

The only problem... I would have liked to use vertical-align:middle; but it doesn't appear to work.

[BenANFA]

Reading another thread it has come to my attention that my solution doesn't work under strict DTDs. This can be solved by changing the style rule for the labels to

form div label {
	display: block;
	float: left;
	width: 36%;
}

Sorry, I would claim to be an expert, but I believe one of the best ways to learn to to try and answer peoples problems, then if you are way off the mark normally an expert will come along and slap your wrists and give the correct answer

I still believe my general approach is correct. You shouldn't try to convert tables to CSS, rather you should decide on the conceptual layout of the page and and create it in CSS ignoring what went before. CSS isn't a different way of laying out your page, it is a different way of thinking.

[Mike Borozdin]

I use:

<div style = "float: left; width: 5%; line-height: 1.4">
  lghjhg<br />
  lghjhg<br />
  lghjhg<br />
</div>
<div style = "float: right; width: 95%;">
  <select>
	 <option>fghghg</option>
  </select><br />
  <input type = "text"><br />
  <input type = "text"><br />
</div>

Thanks, Mike! But I got to add width attribute ot the second div as well. And what bout display: block? What do it do?

[BenANFA]

display: block Indicates that the tag in question should be display as a block level element (div, p, h1, h2 to name a few). That is there is a line break before and after the element.

I also notice that you have your widths as 5% and 95%. This is not a good idea as they add up to 100%, however with rounding errors in the calulation some browsers will end up with total widths a few pixels greater than 100% so you will get a horizontal scrollbar on your window. It is safer to set your widths to something that adds up to slightly less than 100%, say 5% and 94% to avoid this problem.

[Mike Borozdin]

display: block Indicates that the tag in question should be display as a block level element (div, p, h1, h2 to name a few). That is there is a line break before and after the element.

I also notice that you have your widths as 5% and 95%. This is not a good idea as they add up to 100%, however with rounding errors in the calulation some browsers will end up with total widths a few pixels greater than 100% so you will get a horizontal scrollbar on your window. It is safer to set your widths to something that adds up to slightly less than 100%, say 5% and 94% to avoid this problem.

Thanks! And what does 'clear' mean?

[BenANFA]

the clear affects how the element is aligned with other elements that are floated either left or right. It can take values of none, both, left or right with the default being none.

An element with a clear side can not have floated elements to that side. For example if a div that is floated left is followed by a divthat is clear left then the second div will appear benath the first rather than beside it.

Another way of saying it is that an element with a clear side is moved far enough down it's parent so that no other elements appear between it's clear side and that side of it's parent.

Hopefully this code should give you some idea

<style>
.floatedLeft {
  float: left;
  width: 20%;
  border: 1px solid #00c;
}

#NormalDiv {
  border: 1px solid #0c0;
}

#ClearedDiv {
  border: 1px solid #c00;
  clear: left;
}
</style>

<body>

<div class="floatedLeft">
 First Floated Div
</div>

<div id="NormalDiv">
  Uncleared Div
</div>

<div class="floatedLeft">
 Second Floated Div
</div>

<div id="ClearedDiv">
  Cleared Div
</div>

</body>