Divs Appearing Different on Different Browsers

.menu {  height: 48px;  display: flex;}
.menu a {  flex-grow: 1;  display: flex;  font-weight: bold;  background-color: #DD4400;  color: #454545;  align-items: center;  justify-content: center;  text-decoration: none;}
.menu a:hover {  text-decoration: underline;}

<div class="menu">  <a href="/videos.php">Videos</a>  <a href="/playlists.php">Playlists</a>  <a href="/categories.php">Categories</a>  <a href="/actors.php">Actors</a>  <a href="/photos.php">Photos</a>  <a href="/logout.php">Logout</a>  <a href="/account.php">My Account</a></div>

div positions differs in chrome and firefox

In must cases different positioning in different browsers are caused by the fact that each browser has some default CSS styles for elements. e.g margin for body. the best practice is to reset your CSS using one of the CSS Reset code template available (Google for it).

here is an example by Eric:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

For your case you might want to position the div absolutely in the bottom right corner. here is the right way to do it.

.copyright {
    position: absolute;
    right: 0;
    bottom: 20px;
}

Also you can use position:fixed; so even if user scrolls down the page, the div will remain at that fixed position.

divs appearing different on different browsers

The other answers are correct, but not quite there.

Your page is rendering in Quirks Mode in IE, and that's why it looks broken in this browser.

The reason you're getting Quirks Mode is the two UTF-8 byte order marks at the start of your file:

ef bb bf ef bb bf 3c 21 44 4f 43
.  .  .  .  .  .  <  !  D  O  C

You'll need to save your file without this. It should be an option in whatever editor you're using.

To fix Chrome, you should fix the validation errors, particularly the ones like this:

end tag for "ul" which is not finished

Div position different in Chrome than other browsers

Your menus aren't aligned properly as your font size in chrome is too small. I think it is due to the font-variant:small-caps property. This changes your words to uppercase but as the size of a letter in the lowercase of the font.

In chrome, this seems to make the text extra small. You could try to use text-transform:uppercase; which should change all the menus fonts to be the same size in each browser. If you then need to change the font-size to be smaller, you can just apply css font-size to it and that should give you a more cross browser friendly way of capitalising your words

If you have a look at this example in different browsers, you will see you have a better rendering and closer match to each other in terms of size of the text done with text transform than you do with that done with variant

Div not appearing in Chrome only

It's because your div containing the #sohbet element has a height of 100vh set and its parent div has overflow:hidden set. Therefore, the form gets pushed out of the divs bounds and is invisble to the user.
Chrome renders your layout correctly, apparently the other browsers seem to be wrong here.

Fix the problem by decreasing the height. You can e.g. calculate the height, if your header and form have a fixed height by using calc

<div style="height: calc(100vh - <HeightOfHeaderAndForm>);"

You can also use flexbox to fill the available space. I recommend you check out this excellent guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Size of div changes from browser to browser?

Yes you can keep the div size fixed regarding different window size. But It depends on your need. If your div contains texts/image , you can use

overflow:hidden;