Mon, 2013-04-08 23:47
why does IE run the text off the page with this page?
<html> <head><title></title> <link rel="stylesheet" type="text/css" href="css/xleftNav.css"> <style> html,body{font-family:sans-serif;margin:0; padding:0} ul li{list-style-type: none;} </style> </head> <body> <div style="position:relative; padding-right:50px"> <div style="position: absolute; border:1px solid red; margin: 50px 50px 0 35px;"> <ul id="leftNav"> <li class="title">Account Maintenance</li> <!-- <li class="subitem"><a href=#>GSA User Maintenance</a></li> <li class="subitem"><a href=#>Client Maintenance</a></li> <li class="subitem"><a href=#>Contractor Maintenance</a></li> <li class="subitem"><a href=#>Support Maintenance</a></li> --> <li><a href='/assist-web/registration/support/companyMaintenance'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/contractMaintenance'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/updateContractFamily'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/distributionListMaintenance'>voluptatem accusantium</a></li> <li><a href="/assist-web/registration/support/clientOrganizationMaintenance/">voluptatem accusantium</a></li> <li><a href=/assist-web/registration/support/bureauCodeMaintenance>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/supportUserMaintenance'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/gwacPocMaintenance'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/regionMaintenance'>voluptatem accusantium</a></li> <li><a href='/assist-web/registration/support/emailNotificationMaintenance'>voluptatem accusantium</a></li> <sec:authorize access="hasRole('ASSIST.SUPPORT_POC')"> <li><a href='/assist-web/registration/support/pocCertificationReport'>voluptatem accusantium</a></li> <li class="selected"><a href='/assist-web/registration/support/validationDays'>voluptatem accusantium</a></li> </sec:authorize> <!-- <li><a href=#>Annual Validation</a></li> --> </ul> </div> <div style="position: absolute; border:1px solid red; margin: 50px 50px 0 270px; padding-right:50px;"> <h1 class="claro">Maintenance</h1> <h2>Update Validation Days</h2> Validation Days * <input class="submit-field" type="text" size="25" /> <p><input type="submit" value="Submit" /></p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> </div> </div> </body>
Tue, 2013-04-09 12:26
#1
Where's your DTD? Please
Where's your DTD?
Please avoid position:absolute like the plague until you understand fully how to use it and mostly never to position major layout elements also it's a property that due to it's nature is very dependent on knowing it's width/height and position in the page.
Tue, 2013-04-09 15:09
#2
Thanks for responding Hugo!I
Thanks for responding Hugo!
I tried something like that. Here are my results.
Abosolute and Relative Position Version.
<html> <head><title></title> <link rel="stylesheet" type="text/css" href="css/xleftNav.css"> <style> html,body{font-family:sans-serif;margin:0; padding:0} ul#leftNav { list-style: none; padding: 0px; margin: 0px 50px 0px 0px; border:1px solid #cdcdcd; margin-left:1em; font-family:Arial, Helvetica, sans-serif; } </style> </head> <body> <div style="position:relative; padding-right:50px"> <div style="position: absolute; border:1px solid red; margin: 50px 50px 0 35px;"> <ul id="leftNav"> <li class="title">Title Header Here</li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href="#">voluptatem accusantium</a></li> <li><a href="#">voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li class="selected"><a href='#'>voluptatem accusantium</a></li> </ul> </div> <div style="position: absolute; border:1px solid red; margin: 50px 50px 0 280px;"> <h1 class="claro">Maintenance</h1> <h2>Update Title Here</h2> Title Here Days * <input class="submit-field" type="text" size="25" /> <p><input type="submit" value="Submit" /></p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> </div> </div> </body>
Float Left Version
The problem with this is that the 2nd Column width is 78% and does not maintain a consistent right hand margin/padding against the browser border. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.
<!doctype html> <html> <head><title></title> <style> html,body{ font-family:sans-serif; margin:0; padding:0; width: 100%; min-width: 1024px; } .wrapper { margin-left: auto; margin-right: auto; width: 100%; } .clearfix { clear: both; } .menu { border:1px solid red; width: 220px; float: left; } .content { border:1px solid red; width: 78%; float: left; } </style> </head> <body> <div class="menu"> <ul id="leftNav"> <li class="title">Title Header Here</li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href="#">voluptatem accusantium</a></li> <li><a href="#">voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li><a href='#'>voluptatem accusantium</a></li> <li class="selected"><a href='#'>voluptatem accusantium</a></li> </ul> </div> <div class="content"> <h1 class="claro">Maintenance</h1> <h2>Update Title Here</h2> Title Here Days * <input class="submit-field" type="text" size="25" /> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> </div> <div class="clearfix"></div> </body> </html>
Tue, 2013-04-09 16:22
#3
Post code edited to replace
Post code edited to replace 'php' with 'code' in the square brackets.
Tue, 2013-04-09 18:18
#4
I like PHP because I like the
I like PHP because I like the markup colors better.
Tue, 2013-04-09 21:03
#5
Don't float the right hand
Don't float the right hand content just margin it away from the left column or add overflow: hidden. As this is a fluid width you will, at some stage, run into issues with narrow browser viewport so may need to do stuff with media queries or set a min-width.
Wed, 2013-04-10 03:10
#6
That works! Do you know of
That works! Had to use min-width. Don't know what "media queries" are. What's the theory/practice with oveflow? I only know it's used to turn divs into portlets. Do you know of some good tutorials or articles explaining this trend of using margins to arrange boxes? Do people still use absolute positioning to arrange web pages? Thanks!
Wed, 2013-04-10 07:41
#7
Position absolute ought never
Position absolute ought never to be used to lay out page elements, if anyone ever did or suggest it was they were wrong. Use only to position elements within a parent context that observes the flow of elements position: static/relative. Overflow will set a new context and force the contents of the element away from the float -i.e it ought not then to wrap around the float. Using margins is not a trend it's always been the way one describes the space between elements, it's not a positioning tool as such though but large margins can be used when needing to create space or illusion of positioning.
Sun, 2013-05-12 05:43
#8
Do you know a good place to
Do you know a good place to read about the common practice of using margins for layout, and labels and input fields for forms? Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?