...

View Full Version : Fixed div inside another div



taurus2006
04-11-2008, 08:15 PM
Hello Everyone

Is there any way I can make a div position fixed inside another div.For eg
postion:fixed makes an element postion fixed in the WINDOW irrespective of the scrolling.Is there any way I can do this within a div?

-Thank You

harbingerOTV
04-11-2008, 09:01 PM
well a nested div is always going to be fixed in it's parent div so to speak. if your making the parent scroll like giving it a fixed height and have overflow set to auto, then the div you want to fix you can put it out side the scrolling div and use positioning to make it appear like it's inside the parent. Of course this is all speculation as you provided no code to work with.

taurus2006
04-11-2008, 09:32 PM
Hello Sir,

Sorry for not providing the code....here it is...I am coding in JSF

<tr:form id="pendingResults">
<tr:table id="pendingResultsTable" value="#{userAdminBean.pendingResults}" var="pendingResults" varStatus="pendingResultsStatus"
rows="10" emptyText="There are no users awaiting approval." binding="#{userAdminBean.pendingTable}" width="580px" styleClass="userResults">
<tr:column sortProperty="myLastname" sortable="true">
<f:facet name="header">
<tr:outputText value="Last Name" />
</f:facet>
<tr:commandLink text="#{pendingResults.myLastname}" action="#{userAdminBean.displayPending}" >
<f:param name="rowIndex" value="#{pendingResultsStatus.index}"/>
</tr:commandLink>
</tr:column>
<tr:column sortProperty="myFirstname" sortable="true">
<f:facet name="header">
<tr:outputText value="First Name" />
</f:facet>
<tr:outputText value="#{pendingResults.myFirstname}"/>
</tr:column>

Here,"First Name", "Last Name" are the headers...I dont want them to scroll with the results.So, Is there anyway I can include them in a <div> and make its position fixed inside the parent <div>?

-Thank You

mjlorbet
04-12-2008, 08:30 AM
before starting in here, tr;)utput seems like an interesting tag, put your code in [ CODE] tags and you'll not have that problem in the future. what parent div are you referring to? are you trying to nest the whole table or just those 2 fields? if you're trying to nest the whole table, just wrap it in a div, if you're trying to do those 2 fields you first must figure out where your parent div will go before we can try to nest something in it

abduraooft
04-12-2008, 09:07 AM
taurus2006, read http://www.codingforums.com/showthread.php?t=82672
And post the generated html source taken from browser's view source method

Apostropartheid
04-12-2008, 04:59 PM
I've posted an example (http://cyan-light.co.uk/a-fixed-div-within-another) to show you how you can do it.

jlhaslip
04-12-2008, 05:07 PM
Nice bit of code, but it fails in (guess who?) IE6... too bad...

Apostropartheid
04-12-2008, 05:08 PM
Well it would have to. position:fixed doesn't work in IE6. You'd have to use images as a background for that. But cheers for pointing it out.

Updated to reflect this

harbingerOTV
04-12-2008, 06:25 PM
CyanLight,

you can do that if you make the form output like:

form
header
header
div
output stuff
div
form

the 2 headers can then be absolutely positioned over the div so that they are not affected by the div's scrolling. no need for fixed positioning.

p.s. circumnavigation that's your $10 word for the day. got that out of the way early ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum