PDA

View Full Version : Why does <select><option> wrap my div?


Makari
04-23-2007, 07:16 PM
Hello,
I'm new here and I've registered with one simple question. Well, not so simple really as I've been able to turn up exactly ZERO answers to my question so far via searching Google. Below is code for a minimal test case. Everything works as expected. However, try uncommenting the <option> and you will notice the error that I am attempting to correct. Also, this code is valid (well, once you uncomment the <option> at least as the <select> element must have a child element).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Minimal Test Case</title>
<style type="text/css" media="screen">
fieldset {border: 0 solid transparent;}
#formWrapper {border: 1px solid #000000; display: table-cell;}
#sideBarWrapper {border: 1px solid #000000; display: table-cell;}
</style>
</head>
<body>
<div id="formWrapper">
<form action="">
<fieldset>
<select><!--<option>A</option>--></select>
</fieldset>
</form>
</div>
<div id="sideBarWrapper">
<p>This content should be positioned to the right of the form.</p>
</div>
</body>
</html>

coothead
04-23-2007, 08:28 PM
Hi there Makari,

and a warm welcome to these forums. ;)

I do not know the answer to your problem but as I tend to use float:left rather than display:table-cell I do not meet this problem.

coothead

Makari
04-24-2007, 02:18 AM
Yeah, in my original layout the side was floated as well. But the boss wasn't thrilled with that layout because of the large amount of whitespace on larger screens and he didn't want a strictly elastic layout either.

However, it appears that adding body {display: table-row;} seems to fix the problem. I'm assuming for some reason the <option> element forces you to declare that the two divs are indeed on the same 'row'. However, none of this works in IE as it doesn't support display: table. This is simply for browsers that are actually worth their salt ;)