sairfan1 Posted January 4, 2012 Share Posted January 4, 2012 i have following A and B div elements on a page, where position of div A is required to be fixed, and i need width of B div to automatically adjust with size of window. its also important that on some pages div B may not present so div A must maintain its position without div B, plz help. <div id="A" style=" background-color: Yellow; position: fixed; width: 200px; margin-left:0px;margin-top: 150px;"> left panel: position fixed is required </div> <div id="B" style=" background-color: Lime; margin-left: 205px; margin-top:150px;"> auto set width panel </div> Link to comment Share on other sites More sharing options...
eTianbun Posted January 4, 2012 Share Posted January 4, 2012 Cant get what you mean. Explain more! Link to comment Share on other sites More sharing options...
sairfan1 Posted January 5, 2012 Author Share Posted January 5, 2012 just copy and paste this code, and see what are the results, then you will understand how i want to position divs Link to comment Share on other sites More sharing options...
regicidedelferoz Posted January 5, 2012 Share Posted January 5, 2012 in my browser, size of div B is automatically adjusting,. Link to comment Share on other sites More sharing options...
Allen Lawson Posted January 5, 2012 Share Posted January 5, 2012 Is B under some kind of container or do you have a wrapper enabled that could have an error in it? Link to comment Share on other sites More sharing options...
sairfan1 Posted January 6, 2012 Author Share Posted January 6, 2012 yes, for now size of B is automatically adjusting, but u see, position of A is invalid, as its set to 150px from top, for example you try this code, top of both A,B should be like this one. but i lost width of B. <div id="A" style=" background-color: Yellow; position: fixed; float:left; width: 200px; margin-left:0px;margin-top: 150px;"> DIV A: left panel: position fixed is required </div> <div id="B" style=" background-color: Lime; float: left; margin-left: 205px; margin-top:150px;"> DIV B: auto set width panel </div> what i want, is just width of div B should fill remaining place, this is complete code there is no parent or child node. for better understanding im using google chrome Link to comment Share on other sites More sharing options...
regicidedelferoz Posted January 6, 2012 Share Posted January 6, 2012 is this what you are trying to do? <div id="A" style=" background-color: Yellow; position: fixed; float:left; width: 200px; margin-top: 150px;">DIV A: left panel: position fixed is required</div><div id="B" style=" background-color: Lime; float: left; margin-left: 205px; margin-top:150px; width:100%">DIV B: auto set width panel</div> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 6, 2012 Share Posted January 6, 2012 IF you require div id="A" to be permanently fixed 150px from top of page, you must set top property to top:150px (remove top margin), because at present it position itself 150px below top edge of div id="B". Link to comment Share on other sites More sharing options...
sairfan1 Posted January 7, 2012 Author Share Posted January 7, 2012 Thanks dsonesuk now its work fine. can you please explain why div A positioned below div B, rather B is after A below is the correct code for others help <div id="A" style=" background-color: Yellow; position: fixed; width: 200px; margin-left:0px;top: 150px;"> DIV A: left panel: position fixed is required </div> <div id="B" style=" background-color: Lime; margin-left: 205px; margin-top:150px; "> DIV B: auto set width panel </div> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 7, 2012 Share Posted January 7, 2012 As i rarely use position fixed, and when used, i always set the top, left properties at least I've never come across this problem before. The position: fixed element should be taken out of the flow of the other elements completely, but it seems this only applies if at least the top property, is applied. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.