0

I wrote the following HTML and CSS code. I attached an image of the page from Firefox's inspect tool with the div#top element highlighted. As you can see there is a blank space over the top div that I cannot seem to remove unless I break something else.

The blank space above the top div:

The html file: 

    <!DOCTYPE html>
    <html>
    <head>
    <title>title</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body{
            margin: 0px;
        }
        #top {
            border-style: solid;
            border-width: thin;
        }

        #menu {
            border-style: solid;
            border-width: thin;
            float: left;
            width: calc(max(20%, 150px));
            
        }

        #content {
            border-style: solid;
            border-width: thin;
            /* float: right; */
            display: inline-block;
            width: calc(max(350px, 100% - max(20%, 150px)));
        }

    </style>
    </head>
    <body>  
    <div id="top">
        This is the top div.
    </div>
    <div id="menu">
        <ul>
        This div is for the menu.
    </div>
    <div id="content">
        And this one is for the content of the site.
    </div>
    </body>
    </html>

Thank you for your help.

PerplexingParadox
  • 1,196
  • 1
  • 7
  • 26
Merlo98765
  • 1
  • 2
  • 1
    There is something (maybe non-break space) after `` and before `this` word (you'll see that when you copy&paste code from your question eg. to jsfiddle - https://jsfiddle.net/q5k3061e/). – pavel May 05 '21 at 11:53
  • This is essentially a typo. There's content on the page before the first `
    `. An IDE should show this, and it's also visible in the browser's debugging tools. Perhaps the result of a copy/paste error from wherever you're copying/pasting code? Either way, just remove that content.
     – David May 05 '21 at 11:56
  • I opened the file in Notepad++ and even that didn't display those when I turned on visible special characters. But those characters are exactly at the location of php scripts which include other files to my original file. I wanted to put the first include inside the tag since it only deals with SESSION variables, but the the html validator would output an 'element head is missing required instance of child element' error, probably because of the same invisible character. Is there a way remove it prevent it appearing after a php include? Or what is the standard way of using php include? – Merlo98765 May 05 '21 at 12:25
  • @Merlo98765 You need to open the code in a code editor. Possibly there are more special characters in your code. As far as include goes, read this https://www.tutorialrepublic.com/php-tutorial/php-include-files.php and this https://stackoverflow.com/questions/2418473/difference-between-require-include-require-once-and-include-once . Also, would you mind accepting the answer ? For the question asked it is correct, there is no mention of PHP or include in your original post, thank you. – lowtechsun Jun 11 '21 at 14:18

1 Answers1

-1

enter image description here

You have special characters in your source code, remove those and the page will align with the top end of the viewport.

lowtechsun
  • 1,915
  • 5
  • 27
  • 55