I have 2 divs in my CSS: #splitNavigationMenuLeft { float: left; width: 30%; } #splitNavigationMenuRight { float: right; text-align: right; width: 70%; } Code (markup): The above splits a container into 2 pieces. The containers are setup like this: #loginOuterContainer { width: 100%; height: 30px; margin: 0 auto; } #loginInnerContainer { width: 800px; margin: 0 auto; padding: 2px; } Code (markup): That creates a full width background (I removed the colors and background images from the CSS), and then centers an 800 pixel width area. The effect is an area split into 2 sides. The left side has a "Sign Up Today!" link, and on the right side there's a standard user/pass form. The code I'm using to call it is as follows: <div id="loginOuterContainer" class="linkOnOrange"> <div id="loginInnerContainer"> <div id="loginLeftSide"><a href="signup.php"><b>Sign Up Today!</b></a></div> <form id="loginForm" action="process-login.php" method="post"> <div id="loginRightSide"><p>User Name: <input type="text" name="loginUsername" size="15"/> Password: <input type="password" name="loginPassword" size="15"/> <input type="submit" value="Login" name="submitLogin"/></p></div> </form> </div> </div> Code (markup): The class linkOnOrange just handles coloring the link to orange. The problem is it doesn't all show up on 1 line. It gets broken into 2 lines, and it's annoying the heck out of me. It only works correctly in IE6 (not sure about 7). It doesn't work in Opera 9.xx, Opera 7.xx, and FF 2 (not sure about 1.x). This problem persists anywhere I use a form. For example, on my register page, there's an extra linebreak after the submit button. I have the margin and paddings globally set to 0 (and I even tried manually setting them to 0 in a "form" selector). I'm not really sure where the <form></form> code should be placed when I call it. I tried it in various spots, and it doesn't change the extra linebreak. The crazy thing is I had it working before I decided to re-write my CSS from scratch. The crazy part is I went over the working version and this version half a dozen times. It's exactly the same. It's driving me nuts. Edit: Just to save time. I did try removing the <p></p>, it made no difference. I have a: * { margin: 0; padding: 0; } Code (markup): ...thrown in. This should kill any type of margins/padding on ANYTHING right (without having to specifically set it in an element)? For the heck of it I did try to set both the margin and padding on "p" to 0. Didn't change anything.
May we assume you fixed things? I see all form controls in one line, with no line breaks or margins. Tested in Firefox and IE6. cheers, gary
Nope, using all that above code it's still broken up into 2 lines. There seems to be something seriously funky with this. When I declare my opening HTML like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml"> Code (markup): Then it breaks into 2 lines, and the background color is screwed up on every browser except IE6. If I just put <html> then the background color gets fixed (it spans both rows), but it shouldn't be going on 2 rows in the first place. You can easily see this by putting in a background color for loginOuterContainer or loginInnerContainer. I have a feeling it may be a problem with where the actual <form> is located in the DIVs but it's tied into how you declare your <html> tag too but I have not been able to fix it yet. I'm stumped. To better illustrate the problem, here's 2 screenshots: 1) This is under FF2 (broken background span, 2 lines)... 2) This is under IE (working background span, but it's still 2 lines)...
OK, the views gave me a better idea of what you want. This code does the same thing in Firefox, Opera and IE. It may even do what you want. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="fixer" content="Gary Turner" /> <meta http-equiv="content-type" content= "text/html; charset=utf-8" /> <title>dp forum test</title> <style type="text/css"> /*<![CDATA[*/ body { padding: 8px; } /*not in html*/ /* #splitNavigationMenuLeft { float: left; width: 30%; } #splitNavigationMenuRight { float: right; text-align: right; width: 60%; } */ #loginOuterContainer { height: 50px; background-color: orange; border: 2px solid darkgoldenrod; } #loginInnerContainer { padding: 2px; background-color: yellow; border-bottom: 2px solid darkgoldenrod; } #loginLeftSide { float: left; margin: 0; } form { text-align: right; margin: 0; } fieldset { margin: 0; padding: 0; border: none; } label { margin-right: 1em; } /*]]>*/ </style> </head> <body> <div id="loginOuterContainer" class="linkOnOrange"> <div id="loginInnerContainer"> <p id="loginLeftSide"> <a href="signup.php"><b>Sign Up Today!</b></a> </p> <form id="loginForm" action="process-login.php" method="post"> <fieldset id="loginRightSide"> <label for="loginUsername">User Name: <input type="text" name="loginUsername" size="15" /></label> <label for="loginPassword">Password: <input type="password" name="loginPassword" size="15" /></label> <input type="submit" value="Login" name="submitLogin" /> </fieldset> </form> </div> </div> </body> </html> Code (markup): Notice the use of p, fieldset and label element tags. Use element tags that properly describe the structure and meaning of the content. The div element is an aggregator, without semantic value. Its purpose is to group other block level elements. cheers, gary
Ok, that's much better. I didn't know about the fieldset/label tags. Your layout was close to what I was after. Thanks for the lesson. I especially liked how you managed to get text aligned on the left and right side, without having to manually set static widths. This will cleanup my css by quite a bit since since I am reusing the same class to output my page content, but had a bunch of different left/right containers setting different widths (some of them were 30%/70%, others were 50%/50%, etc.). This was the desired effect: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="fixer" content="Gary Turner" /> <meta http-equiv="content-type" content= "text/html; charset=utf-8" /> <title>dp forum test</title> <style type="text/css"> /*<![CDATA[*/ body { margin: 0; padding: 0; } /*not in html*/ /* #splitNavigationMenuLeft { float: left; width: 30%; } #splitNavigationMenuRight { float: right; text-align: right; width: 60%; } */ #loginOuterContainer { height: 30px; background-color: yellow; border-bottom: 1px solid darkgoldenrod; } #loginInnerContainer { width: 800px; margin: 0 auto; padding: 2px; background-color: yellow; } #loginLeftSide { float: left; margin: 0; } form { text-align: right; margin: 0; } fieldset { margin: 0; padding: 0; border: none; } label { margin-right: 1em; } /*]]>*/ </style> </head> <body> <div id="loginOuterContainer" class="linkOnOrange"> <div id="loginInnerContainer"> <p id="loginLeftSide"> <a href="signup.php"><b>Sign Up Today!</b></a> </p> <form id="loginForm" action="process-login.php" method="post"> <fieldset id="loginRightSide"> <label for="loginUsername">User Name: <input type="text" name="loginUsername" size="15" /></label> <label for="loginPassword">Password: <input type="password" name="loginPassword" size="15" /></label> <input type="submit" value="Login" name="submitLogin" /> </fieldset> </form> </div> </div> </body> </html> Code (markup):