CODEWITHSUNDEEP
htmlcss
Mantar
Mantar

Reputation: 2720

Why does my floating div push around other divs?

I have a div which has a table which has a google map.

I want to place a info box within the google map external to the map, just floating on top

But I can't seem to get it right, the info div just pushes around the google map despite being on top of the map...

CSS

.google_map {
    height: 270px;
    width: 100%;
 }

    #flightMapInfo {
        position: relative;
        float: left;
        z-index: 100;
        color: #FFFFFF;
        top: 30px;
        left: 50px;
        background:#5a85a5;
        padding: 5px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }


div.tabContent {
    border: 1px solid #c9c3ba;
    padding: 0.5em;
    background-color: #f1f0ee;
    min-height: 300px;
}


.tableLeft {
    width: 75%;
    float: left;
    border-right: dotted 2px black;
}

HTML

    <div class="mapBlock tabContent">
        <div id="flightMapInfo">WHARGL</div>
        <table class="tableLeft">
            <tr><td><div id="flightMap" class="google_map"></div>
               </table></td></tr></div>

Upvotes: 3

Views: 16146

Answers (2)

Adam Kiss
Adam Kiss

Reputation: 11859

I wanted to comment on @scunliffe's answers, but this is rather lengthy.

Float says to browser, that rather than normal behaviour, divshould be either left or right and the rest of content should flow around (think: Images in *.doc).

Your problem is, that you confuse english 'float' [To remain suspended within or on the surface of a fluid without sinking] with css' 'float' [stay to 'left' or 'right' border and flow rest of website content around]

What you want to do is take the div out of normal flow of webpage (thus: position:absolute) position it.

Hint: absolute is relative to 0;0 of first found ancestor, which is relative or absolute. Relativeis relative to 0;0 of what would be position in normal flow.

Relative divs* act as if they were on their original place , they are just rendered shifted. Absolute divs* are taken out of flow of website and position accordingly to hint above.

    • by div, I mean any styled tag

I apologize if you know all this and just can't make it work.

EDIT In position:absolute; this means first found ancestor:

<body>
  <div id="wrapper">
    <div id="innerWrapper">
      <div id="content">

and two CSS cases:

1.

#content { position: absolute; top: 10px; left: 20px; }

2.

#innerWrapper { positon: absolute; top: 200px; left: 200px; }
#content { position: absolute; top: 10px; left: 20px; }

In case one, since nether #wrapper nor #innerWrapper have set position, first absolute or relative ancestor in tree is body, thus positioning of 10px;20px is made from 0;0 of body (read: viewport) - #content is at 10;20 of window.

In case two, #innerWrapper is set absolute, thus making 200;200 of window a point, which is understood as 0;0 when positioning #content. Therefore (absolute ancestor found), content will be at 210;220 of window

Example: http://jsfiddle.net/3dq6V/

Upvotes: 16

scunliffe
scunliffe

Reputation: 63580

I think you are looking for position:absolute; not float:xxx.

Float just indicates that it will "flow" with the other elements on the screen... you want it to float above the other content and not be constrained by it, thus you want absolute positioning.

Upvotes: 3

Related Questions