Forum Moderators: not2easy
I have a three column layout and making use of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
In the left nav i have two individual forms, each with a maximum width set to the width of the nav bar (Left float). The form tags break the layout and cause the content (middle) div to fall below it. This displays as expected in IE, but breaks in Firefox2. I have tested it to extent where I know the <option></option> tag is the cause of the width/div expanding.
When I restrict the option tag to a (narrow) width i.e.
.search form select option {width: 100px;}
I can see the options deminishing in width, but the layout still breaks.
Any ideas? Is the above clear or do I need to post some code?
1. You really should be styling the <select> instead of the <option>.
2. Setting a width on the select/option could cause some values to become unreadable. For example, the text might not fit in the allocated width and single row select boxes don't provide any way to scroll.
3. Perhaps you should try setting the width on your form container (not the <form> element... you should avoid applying presentational styles to that), and set the overflow style to "hidden" or "scroll"
4. You might want to read the thread: "Why most of us should NOT use XHTML" [webmasterworld.com]
Here is an example of what I am talking about:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en">
<head>
<style>
html {height: 100%;}
.clear {line-height: 0px; font-size: 0px; clear: both; height: 0px; }
#page {width: 1049px; text-align: left; margin-left: auto; margin-right: auto; border: 1px solid red;}
#page #template {width: 929px; height: 100%; display: table; border: 1px solid blue;}
#page #template #header {width: 929px; height: 147px; border: 1px solid green;}
#page #template #nav {width: 168px; height: 100%; display: table; margin-right: 25px; border: 1px solid orange; float: left;}
#page #template #container {width: 699px; float: left;}
#page #template #container #content {width: 595px; float: left;}
#page #template #container #nav2 {width: 104px; height: 500px; background-color: #dedede; float: right;}
</style>
</head>
<body>
<div id="page">
<div id="template">
<div id="header"></div>
<div id="nav">
<form>
<select><option></option></select>
</form>
<div class="clear"></div>
</div>
<div id="container">
<div id="content">
Content
</div>
<div id="nav2">
nav2
</div>
</div>
</div><!-- /template -->
</div><!-- /page -->
</body>
</html>
If you remove <option></option> the layout seems to work in both IE6 and FF2. In the actual code I also have
<?xml version="1.0" encoding="iso-8859-1"?>height: 100% was added to force the nav bar to 100%, but this does not work in Safari.
I tried setting a width on the form container, but that did not work. At the moment, I don't really have an option, but to try to get this working as XHTML.
It does seem odd that adding the select/option is causing this problem. It looks like it's not able to calculate the height properly. I poked around for a bit, but I wasn't able to come up with a solution. Sorry. I guess my suggestion would be to try using an existing method for creating the three columns.
Your #nav is floated left. You're also trying to specify the height as 100%. However, it can only determine the height if it is explicitly set on it's parent. But floating the element takes it out of the flow, it can't calculate 100%.
