Form layout using CSS - make div respond to position of others 2

[markknowsley]

I want to design a web form using CSS, with the layout as follows:

-- HEADER --
COL1 -- COL2
-- FOOTER --

However, I want the footer DIV to be positioned according to the height of both column DIVs - I'm going to add a number of controls to each column and I always want the footer to appear under the columns, and not overlap no matter what the size of the columns.

Can anyone suggest how I can do this, and / or post some code?

 

[ca8msm]

You could use clear:both on the footer to make sure it clears both the left and right elements


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[markknowsley]

That didn't work; I've declared four "ID's" in the Style Sheet:

#navAlpha (col1)
#navBeta (col2)
#navDelta (Header)
#NavEpsilon (Footer)

and added clear:both; to the code for Epsilon. However when I create four DIVs, each using one of the ID's the browser has rendered Delta, then Epsilon, and then Alpha and Beta underneath Epsilon.

 

[ca8msm]

Paste a cut down example of your page so we can see what you are doing


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[traingamer]

ca8msm's answer assumes that you are floating the col1 and col2 divs. We actually don't know what you are doing since you haven't told us...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[markknowsley]

Here's the content of the Style Sheet:

#navAlpha 
{
position:absolute;
/*width:400px;*/
top:50px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;

voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
		
#navBeta 
{
position:absolute;
/*width:400px;*/
top:50px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;

#navDelta 
{
position:relative;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
voice-family: "\"}\"";
voice-family:inherit;
width:auto;
}

#navEpsilon
{
position:relative;
border:1px dashed black;
background-color:Green;
padding:10px;
z-index:4;
voice-family: "\"}\"";
voice-family:inherit;
width:auto;
clear: both;
}

And here's the aspx declaration:

<form id="form1" runat="server">
    <div id="navDelta"></div>
    <div id="navAlpha">
        <p><asp:TextBox ID="txtText" runat="server" CssClass="TextBoxStyle" /></p>
    </div>
    <div id="navBeta"></div>
    
    <div id="navEpsilon"></div>
    </form>

 

[ca8msm]

Yes, there's the problem (as traingamer pointed out). You are absolutely positioning the divs which should be avoided in most cases. Try floating the elements instead.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[markknowsley]

Sorry for being dense, guys, but what do you mean by float? If I change the position of the col1 and col2 divs to relative and remove the left and top positioning I just get all the divs lined up on the left of the web page.

 

[ca8msm]

Sorry for being dense, guys, but what do you mean by float?

Have a read up on it here:

http://www.w3schools.com/css/pr_class_float.asp

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[traingamer]

Here's a partially-stripped down working example

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	font-size: small;
	background: #fff;
	}
a:link {
	color: #39c;
	}
a:visited {
	color: #369;
	}
/* layout */
#container {
	min-width: 600px;
	max-width: 1400px;
	}
#content {
	float: left;
	width: 70%;
	font-size: 95%;
	color: #333;
	line-height: 1.5em;
	}
#nav {
	float: right;
	width: 30%;
	}
#footer {
	clear: both;
	background: #6c3 ;
	text-align: center;
	font-size: 85%;
	line-height: 125%;
	color: #600;
	border-top: 3px solid #660;
	border-bottom: 3px solid #660;
	margin-top: 10px;	}
/* gutters */

#content .gutter { 
	padding: 0 25px;
	}
#nav .gutter { 
	padding: 5px 15px;
	}
#nav ul { margin: 0;
}

<body>
<div id="container">
<div id="header">
<h1>Main header</h1>
</div>
<div id="content">
  <div class="gutter">
<h1>More stuff</h1>
<p>Sample paragraph. Blah. Blah.</p>
<p>More stuff.</p>
</div>
</div>  <!-- end #content -->
<div id="nav">
<div class="gutter">
<h4>Public Pages</h4>
<ul>
<li class="current"><a href="[URL unfurl="true"]http://zzzz/">Main</a></li>[/URL]
<li><a href="[URL unfurl="true"]http://www.zzzz/about.htm">About[/URL] it</a></li>
<li><a href="[URL unfurl="true"]http://www.zzz/cook.htm">Cooks</a></li>[/URL]
</ul>
</div>
</div>
<div id="footer">
Footer stuff: 
<p>Footer paragraph</p>
<p>Copyright blah blah blah</p>
</div>
</div><!-- end #container -->
</body>

Everything is wrapped in a container div. The header is in the normal flow of the document, the two columns are floated; the footer 'clears' the floats.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[IT4EVR]

Sorry to jump in on this but it looks like something that might help me. I'm a CSS rookie too but have realized the utility of learning this.

I've been reading about CSS positioning but it's a different story when putting it into practice.

Too often I have to fall back on tables for designing web forms. Obviously it's pretty quick and easy, however, I've come to learn that nested tables represent bad performance.

Maybe I just could extend the code you have listed so far, but this is what I'm trying to do. Basically this is a form with 2 columns, one for label other for text. I tried using absolute positioning but it didn't work out well. How could I implement this in CSS? I would assume you would use a percentage value instead of hard coding width in pixels, because invariably you have to deal with users in different screen resolutions. Thanks so much.

<HTML>
....
<form>
<table>
<tr>
<td><label id="lblFirstName" for="txtFirstName"></label></td>
<td><input type="text" id="txtFirstName"></td>
</tr>
.
.
.

 

[IT4EVR]

Actually I found a good sample online that answers my question. I learned something good from your examples though. Thanks for sharing.

 

[johnwm]

IT4EVR
When you find a good example online that solves one of these problems it may help others if you post a link

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[markknowsley]

Big thanks to everyone who has posted onto this discussion - your help has been invaluable. This is what makes Tek - Tips such a great forum; I've not found another one anywhere that provides such helpful support.

 

[IT4EVR]

Here is one link I found helpful:

http://www.websiteoptimization.com/speed/tweak/forms/