8 replies [Last post]
ryanjohnsond
ryanjohnsond's picture
Offline
newbie
san diego
Last seen: 7 years 18 weeks ago
san diego
Timezone: GMT-7
Joined: 2011-06-06
Posts: 6
Points: 8

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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ryanjohnsond
ryanjohnsond's picture
Offline
newbie
san diego
Last seen: 7 years 18 weeks ago
san diego
Timezone: GMT-7
Joined: 2011-06-06
Posts: 6
Points: 8

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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Post code edited to replace

Post code edited to replace 'php' with 'code' in the square brackets.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ryanjohnsond
ryanjohnsond's picture
Offline
newbie
san diego
Last seen: 7 years 18 weeks ago
san diego
Timezone: GMT-7
Joined: 2011-06-06
Posts: 6
Points: 8

I like PHP because I like the

I like PHP because I like the markup colors better.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ryanjohnsond
ryanjohnsond's picture
Offline
newbie
san diego
Last seen: 7 years 18 weeks ago
san diego
Timezone: GMT-7
Joined: 2011-06-06
Posts: 6
Points: 8

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ryanjohnsond
ryanjohnsond's picture
Offline
newbie
san diego
Last seen: 7 years 18 weeks ago
san diego
Timezone: GMT-7
Joined: 2011-06-06
Posts: 6
Points: 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?