Jump to content

Align Div And Maintain Its Width


sairfan1
 Share

Recommended Posts

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...