[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 417
  • Last Modified:

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.
<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>

Open in new window

0
dignified
Asked:
dignified
5 Solutions
 
majkiwCommented:
The CSS seems to be OK and works well statically.
So probably it's because of the way in which you change the content of status. How do you perform that?
Or maybe just the status is too long?
0
 
blacksixCommented:
I'm a little confused by something. You said you have from left to right 1) calendar, then 2) status message, then 3) the static form. So if the form is in the rightmost column, how can it be centered on the page?

Also, by dynamic do you mean the content is changing inside of those divs via javascript? Or do you mean the solumns resize when the browser window is resized?
0
 
wilson1000Commented:
OK, try this code and tell me if I'm on the right track:


#mainform{
margin: 0 auto;
width: 500px;  /* whats the width of the form?? */
padding: 5px;
}
 
#cal {
position:absolute;
left:0;
top:0;
}
 
#status{
margin-left 100px; /* you should add the width dimension of the calendar here, enough to clear it. */
width: 200px;
}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
dignifiedAuthor Commented:
the form doesn't have to be centered on the page, just stop it from jumping every time the status changes.

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.
0
 
dignifiedAuthor Commented:
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.
#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;
	}

Open in new window

0
 
dignifiedAuthor Commented:
I take that back, my code does not work in MSIE, only Firefox.
0
 
wilson1000Commented:
Using position relative allows you to absolutely position an element as a child to the relative container - although some anomalies in IE happen.

Regardless...

margin:0 auto; will center a block element with width dimensions.

Try the code below, use the clearBoth class inside the last </div>, after the form container



#wrapall{
width:700px; /* adjust to suit */
zoom:1; /* hasLayout hack for IE, include this in IE only comments file if needed */
}
 
#mainform{
float:right;
margin:0 0 15px 15px;
}
 
#cal{
position:absolute;
left:0;
top:0;
width: 180px;
}
 
#status{
margin-left: 180px;
width: 200px;
}
.clearBoth {
clear:both;
font-size:1px;
height:0;
}

Open in new window

0
 
wilson1000Commented:
Sorry, you should add another element named like this:


<div id="wrapall">
 
 
<div id="cal"></div>
 
<div id="status"></div>
 
<div id="mainform"></div>
 
 
<br class="clearBoth" />
</div>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now