Div Not Showing Up in Chrome

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/

DIV not showing up in Chrome

It is set to:

visibility: hidden !important;
display: none !important;

in my Chrome and it is my Ad blocker that does it.

Change the Id to something less ad-ish.

Chrome not displaying div

That is clearly some kind of ad blocker extension, that inserts its own style rules to block/hide elements – look at the identifiers used in that selector, should be pretty obvious.

Edit: [further explanation, from comment]

The selector contains “ad” in all imaginable combinations, plus “advertisement”, “banner”, “sponsor” showing up as well. That is a typical kind of “kill ’em all (at least the most obvious ones)” attempt by an ad blocker – and that often leads to collateral damage.

You can also see .ads_320_100 there, which is targeting a specific, typical banner size; some blockers even remove all images that have that kind of “dimensions” specified in their name, for certain “ad-typical” image sizes. (Even though it makes server-side management of different image sizes easier, I’d recommend to stay away from such naming schemes – for this exact reason.)

Div does not show in Google chrome (shows in firefox)

Here's a question from a long while back, but may be helpful to you. Try turning off your adblocker in Chrome or changing the id's to something "less ad-ish" (according to the answer on the other question)

Other stackoverflow question: DIV not showing up in Chrome

Div not displayed in chrome without any reason

Oh it seems the the div named "ad-wrapper" was removed by ad-blocker. Renaming the div to ad-wrapperx solved the problem.

Flexbox div not showing in Chrome

Here you go: DEMO

The most important part is to set your flex items (.map-container and .sidebar) to flex-basis: 50% which is in the flex shorthand flex: 0 1 50%

You can adjust those accordingly.

CSS

.wrapper {
    height: 100vh;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.header {
    flex: 0 0 50px;
    width: 100%;
    background-color: #ff0000;
}
.content {
    flex: 1 0 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: space-around;
    align-items: space-around;
}
.sidebar {
    background-color: #00ff00;
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
    overflow-y: scroll;
}
.map-container {
    position: relative;
    -webkit-flex: 0 1 50%;
    flex: 0 1 50%;
}
.map {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0000ff;
}

Chrome not displaying divs

Your fiddle HTML begins with:

<div class="ma_content">
        <div class="top_kutucuk kutucuk_1">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image4.png" width="198" height="396"></a>

add float: left to anchor and move it between those two divs on the same DOM level: http://jsfiddle.net/2LfLtem6/4/

Short explanation: if you mix floated block divs with inline content then you'll have a very big headache and messed up layout :)

---

Related Topics