3 replies [Last post]
jstuardo
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hello.. I'm having a head ache with this...

I have this HTML:

<form id="frmMensaje">
	<div id="main">
        ..... (rest of form elements)
	</div>
</form>
<div>
Some text
</div>

I want simply "Some text" to appear after the form. I am seeing the page in Firefox with firebug enabled and "Some text" appears at position top = 0 of the form. By using firebug to see the code, I realized that "main" div was correctly resized to fit its content, but the form has 0 height. I needed to set a fixed height of the form in order to move the "Some text" down until it reached the bottom of the form. How can it be done automatically?

This is the style for the form and main.

form#frmMensaje
{
	margin: 0 auto;
	padding: 0;
}
div#main
{
	width: 700px;
	padding-top: 20px;
        position: absolute;
}

Notice the "position: absolute" in #main. I need that so I cannot remove it. I tried to use position absolute in the form but without success.

Any help will be greatly appreciated.

Thanks
Jaime

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Why?

What compelling reason do you have for using absolute positioning? It is seldom advisable for major page components.

Can you link to the page for us? Short of that, post the entire source for the page; html and css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jstuardo
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-4
Joined: 2009-06-26
Posts: 44
Points: 51

Hello... please connect to

Hello... please connect to http://www.desytec.com/qa_sites/free/frontend_dev.htm … when I see this in my notebook, which has a resolution of 1366 x 768, the footer which says the copyright, appears superimposed and if I scroll the page down, the text "¡No pierdas tiempo, y REGÍSTRATE GRATIS ahora!" appears outside of the blank background. Of course, I need the white background to be extended and the "copyright" footer to appear at the bottom of the page.

Thanks
Jaime

//mod edit: link fixed. --gt

AttachmentSize
free_1.jpg 159.56 KB
free_2.jpg 166.2 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Bad syntax

Before going farther, validate your markup.

You must lose the absolute positioning. It does nothing other than help screw things up. Remember, AP elements do not exist as far as other elements are concerned.

Remove the height property from all elements. The float must have content. Add {overflow: hidden;} to the #content element. Make #outer {display: table;}. (See Enclosing float elements for info.)

The span element, here

<div id="mensajeventajas">
¿Cuáles son las ventajas de registrarse? Si te registras, podrás ...
<ul id="ventajas">
<span>
should be a <p>.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.