Divs Not Flowing Correctly

hi. i'm working on website , ran problem 1 div not recognizing edge of another, causing position containing div instead of it's normal flow (or @ least that's think happening). i've tried forcing static positioning declaring in css rule, it's not working in dreamweaver's design view. appears correct in live view , major browsers, work in design view, preview in live view, need appear correctly in design view.

 

here's screenshot of looks in design view (incorrectly):

 

and here's looks in live view , major browsers (correctly):

 

here's html:

 

            <div id="header">

        <div id="indexnav">

          <a href="index.html" id="indeximage" class="home">home</a>

        </div>

        <div id="aboutnav">

          <a href="about.html" id="aboutimage" class="about">about</a>

        </div>

        <div id="logo">

          <a href="index.html" id="logoimage" class="logo">logo</a>

        </div>

        <div id="portfolionav">

        </div>

        <div id="contactnav">

        </div>

      </div>

 

 

and here's css:

 

#header {

    width:1024px;

    height:236px;

    margin-left:auto;

    margin-right:auto;

    clear:both;

    position:absolute;

}

 

#header div {

    display:inline-block;

}

 

/**********>>>>navigation/logo<<<<**********/

/*persistent page indicators*/

body.home a.home,

body.about a.about,

body.portfolio a.portfolio,

body.contact a.contact {

    background-position:0% 0% !important;

}

/*end persistent page indicators*/

 

#indexnav {

    width:102px;

    height:29px;

    margin-top:75px;

    margin-left:77px;

    float:left;

}

 

#indeximage {

    display:block;

    width:102px;

    height:29px;

    background-image:url(../images/home-nav.png);

    background-position:0% 100%;

    background-repeat:no-repeat;

    overflow:hidden;

    white-space:nowrap;

    text-indent:100%;

}

 

a#indeximage:hover {

    background-position:0% 0%;

}

 

#aboutnav {

    width:108px;

    height:29px;

    margin-left:74px;

    margin-top:64px;

    float:left;

    clear:left;

}

 

#aboutimage {

    display:block;

    width:108px;

    height:29px;

    background-image:url(../images/about-nav.png);

    background-position:0% 100%;

    background-repeat:no-repeat;

    overflow:hidden;

    white-space:nowrap;

    text-indent:100%;

}

 

a#aboutimage:hover {

    background-position:0% 0%;

}

 

#logo {

    width:486px;

    height:204px;

    margin-left:83px;

    margin-top:33px;

    position:static;

}

 

#logoimage {

    display:block;

    width:486px;

    height:204px;

    background-image:url(../images/logo.png);

    overflow:hidden;

    white-space:nowrap;

    text-indent:100%;

}

 

/**********>>>>end navigation/logo<<<<**********/

 

can please tell me why happening , how fix it?

presumably don't have link can view on our systems, right?  have got overflow: hidden images did these ideas from?  on these forums or making things went along?

 

i suggest post link can understand going on.

 

g/l

More discussions in Dreamweaver support forum

adobe