Form submit causing div to drop down.

[omgsmith]

Hey Guys,

Was wondering if anyone had experienced this problem before? I've done some simple markup for a site I'm working on ( http://www.blackoutmedia.co.uk/site ) and for some reason when you click on either Submit or Clear on the form to the bottom right, the containing div drops onto the next row so to speak.

Any ideas?

[Rowsdower!]

Hmm, I'm not experiencing that issue here. What browser are you working in? Also, it's a good first step at this stage to go ahead and validate all of your HTML (http://validator.w3.org/check?uri=ht...ss=1&verbose=1).

You currently have 25 listed errors and 4 warnings. These might be contributing to your problem. Once you're using valid code post back so we can take a look at a clean page.

P.S. Welcome to the forums!

[omgsmith]

Originally Posted by Rowsdower!

Hmm, I'm not experiencing that issue here. What browser are you working in? Also, it's a good first step at this stage to go ahead and validate all of your HTML (http://validator.w3.org/check?uri=ht...ss=1&verbose=1).

You currently have 25 listed errors and 4 warnings. These might be contributing to your problem. Once you're using valid code post back so we can take a look at a clean page.

P.S. Welcome to the forums!

Just ran through the validation and it's all fine now, still dropping the div down though :s

[Rowsdower!]

Originally Posted by omgsmith

Just ran through the validation and it's all fine now, still dropping the div down though :s

Ok, that's a good start. Still, what browser are you seeing this in?

[omgsmith]

Originally Posted by Rowsdower!

Ok, that's a good start. Still, what browser are you seeing this in?

Firefox 3.0.9 on OSX.

[Rowsdower!]

OK, I'll go ahead and hit you with this suggestion:

#main_content {
clear:both;
color:#828282;
margin:auto;
overflow:auto;
padding-bottom:10px;
padding-top:10px;
width:950px;
}

This might be related to your problem in FF3, but in any case this fixes a breakdown in your layout in FF2 in XP. Let me know if this takes care of your FF3 issue as well...

[omgsmith]

Originally Posted by Rowsdower!

OK, I'll go ahead and hit you with this suggestion:

#main_content {
clear:both;
color:#828282;
margin:auto;
overflow:auto;
padding-bottom:10px;
padding-top:10px;
width:950px;
}

This might be related to your problem in FF3, but in any case this fixes a breakdown in your layout in FF2 in XP. Let me know if this takes care of your FF3 issue as well...

Spot on buddy, thanks!

Fixed a couple of safari issues too

[Rowsdower!]

Originally Posted by omgsmith

Spot on buddy, thanks!

Fixed a couple of safari issues too

Glad to help. Just FYI, the problem was with your previous and next buttons (e.g. div#prevBtn). They extended below the bottom edge of their containing element so the content in question was still trying to let them float. This pushed the content right and made the 950px width of the container insufficient to house all three of the div's within, thus dropping the last one onto the next "line."