dignified
asked on
Simple CSS Layout with DIV Tags. Dynamic content resizes page.
What I'm looking for is to have a dynamic calendar in the top left corner, a dynamic status message to the right of that, and then a static form to the right of that.
The problem is that when the status message changes, the form to the right of it moves. I want it to all stay in one place.
I also want the #mainform centered in the middle of the window.
The problem is that when the status message changes, the form to the right of it moves. I want it to all stay in one place.
I also want the #mainform centered in the middle of the window.
<style>
#mainform{
margin-left:auto;
margin-right:auto;
padding: 5px;
}
#cal{
float: left;
}
#status{
float: left;
width: 200px;
}
</style>
<div id="cal"></div>
<div id="status"></div>
<div id="mainform"></div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This code seems to work, though I'm not sure what the position:relative and margin:0 auto are doing. I just guessed.
Not sure if this is optimal either.
Not sure if this is optimal either.
#cal{
position:absolute;
left:0;
top:0;
width: 180px;
}
#status{
margin-left: 180px;
width: 200px;
position: absolute;
}
#mainform{
position: relative;
margin: 0 auto;
width: 500px;
padding: 5px;
}
ASKER
I take that back, my code does not work in MSIE, only Firefox.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, the content in the #cal and #status changes via a jquery call like $("#status").html("loading
wilson1000:
That code doesn't work, when the status changes, the form jumps down.