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

dignifiedAsked:
Who is Participating?
 
majkiwConnect With a Mentor Commented:
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
 
blacksixConnect With a Mentor Commented:
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
 
wilson1000Connect With a Mentor Commented:
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
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
 
wilson1000Connect With a Mentor Commented:
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
 
wilson1000Connect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.