Side panel sits below main panel on one page only

HTML & CSS
1

I have a problem on one page www.5star-seo.com/form.php where the right side panel displays below the main content panel. This only occurs on this one page. All other pages are correct and display perfectly. Can anybody help?

2

Validate your html for starters: https://validator.w3.org. I see two stray closing tags that could mess up your layout. Once you have corrected that, if it doesn’t fix the issue, we can take another look.

3

Hi there,

Thanks for looking but I still can’t find the error. Can you please point me in the right direction?

4

The validator should point out exactly where the errors are.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.5star-seo.com%2Fform.php

5

Hello Sam, Thanks, but I still can’t make head nor tail of the errors. The iFrame error is relatively minor and sure it has nothing to do with my problem, however I know the errors are somewhere within the form. If I remove the whole form and just leave everything else, (including the iFrame) the page works perfectly. I don’t know what to change in the form to correct my problem.

6

With the link that @SamA74 supplied try selecting “source” from the “options” button

The error points to row 29. There is no style by the name of logo.

Did you mean class and not style?

 <div style="logo"> ↩
7

Hi John, No, if we change that to “Class” it makes a mess of the header area.
As I mentioned earlier, my problem I believe is in the form somewhere. If I delete the whole form, the page works perfect. Put the form back in, and our problem of the right panel sitting below the main content returns.

8

Incidentally the other thing I notice is when I view the page in browser before uploading, it shows great. Upload and the problem manifests itself - weird. Probably only a simple little thing, but I can’t work it out.

9

Try changing to id instead of class. If that does not work try temporarily removing the statement.

10

Hi John, Thanks for that. It has cured the “Logo” error, but has not cured my original problem which of course is the right panel sitting below main content. I still believe we need to look in the form for the answer.

11

Hi,
You have nested your sidebar in the content div. Begin your sidebar after your content div closes so they are both siblings in main

      <main>
          <div class="content">
          </div><!-- /.content -->

          <div class="sidebar">
          </div><!-- /.sidebar -->
      </main>

And as others ahve mentioned you need to straighten out your logo div.

There is a logo class in your css

.logo { 
	position:absolute;
	top: 42px; 
	left: 37%;
	max-width:100%;
	height:auto;
}

If it doesn’t work then make corrections where needed. You have AP’d it so make sure you have set up header as your containing block by setting it to position:relative

And I just noticed that the header did not have position:relative on it

1 Like
12

I have just checked and there are still errors and warnings on the page.

Removal of these errors and warning will prevent the browser in trying to guess what you would like to achieve.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.5star-seo.com%2Fform.php&showsource=yes

13

see post #11

14

Hi Ray,

The logo Div changed to ID has removed that error in W3 Validator ok so that error has gone. However I had double checked the closing </DIV> and appear to be all there. If I add another one where you suggest, the sidebar column goes straight down below and the footer goes all to hell as well. By adding relative to the logo, that also upsets things - the little floating 5 Star jumps to below the menu instead of sitting on the banner and moving across as the screen width changes.

15

I agree with you John, but I don’t know what to do to correct these errors.

16

It’s not about adding another closing div, it’s about taking the sidebar out of your left column, which is called content. On your site you will see that sidebar is inside of contents border lines.

Here is a ss of your corrected page as per the instructions I gave.
I just pulled your html and css down so pay no attention to the missing map

600Ă—388 106 KB

Here is FF inspector showing that your sidebar is nested in the content div

400Ă—170 9.28 KB

1 Like
17

Hi Ray, Ok, but why is it that all other pages are correct? It only is this form.php page that is wrong. The same template was used for all, just data changed. I thought both columns, left and right were within the content, then clearing to the footer. Am I missing something?

18

You have the logo class on the image, so that is what the css was for.

Change the div class name to logo-wrap or something

<div class="logo-wrap">

Then add styles if needed

19

Because the html is correct on all other pages.
Here is the home page with the same structure I showed in post #11

334Ă—141 8.17 KB

You see how content and sidebar are siblings and children of main

In the previous code shot, sidebar is a child of content

EDIT:
More than likely the form.php page has the structure wrong, then the html is rendered incorrectly on your site.

You can upload your form.php here if you are having trouble, then we can make corrections to it

1 Like
20

Hi Ray, It appears that under the main content I have the form content closed, along with the post closed and the content closed (as above). I then removed two close divs before the footer and the appearance hasn’t appeared to change. I uploaded again and right panel still sits below.