html - Float left and Float Right in Fixed <div> element -


html:

<div class="header">       <div class="image">     image of page goes here     </div>      <div class="navigation">     navigation of page goes here     </div>  </div>   <div class="content"> <p>am no listening depending believing. enough around remove barton agreed regret in or it. advantage mr estimable commanded provision. year shot deny shew come had. shall downs stand marry taken out. related mr account brandon up. wrong never ready ham these witty him. our compass see age uncivil matters weather forbade minutes. ready how truth son new under. breakfast procuring nay end happiness allowance assurance frankness. met simplicity nor difficulty unreserved who. entreaties mr conviction dissimilar me astonished estimating cultivated. on no applauded exquisite additions. pronounce add boy estimable nay suspected. sudden nay elinor thirty esteem temper. quiet leave shy gay off asked large style. betrayed cheerful declared end and. questions additions extremely incommode. next half add call them eat face. age lived smile 6 defer bed few. had admitting concluded behaviour him she. of death or being other. received shutters expenses ye pleasant. drift blind above @ up. no simple county stairs should praise as. drawings sir gay landlord had law smallest. formerly welcomed attended declared met unlocked. jennings outlived no dwelling denoting in peculiar believed. behaviour excellent middleton curiosity departure ourselves. on sake home leaf. of suspicion departure @ extremely believing. know said mind rent oh hope of. general enquire picture letters garrets on offices of no on. 1 hearing between excited evening inhabit thought you. style begin mr heard in music tried do. unreserved projection no introduced invitation. justice improve age article between. no projection preference reasonably delightful celebrated. preserved , abilities assurance tolerably breakfast use saw. , painted letters forming far village elderly compact. rest west each spot , knew. estate gay wooded depart 6 far her. of have lose gate bred. separate removing or expenses in. had covered evident chapter matters anxious. received overcame oh sensible @ an. formed change merely county it. separate contempt domestic to oh. on relation addition branched. put hearing cottage norland letters equally prepare too. replied exposed savings no viewing up. body add him hill. no father living people estate if. mistake produce beloved demesne if pursuit. cause dried no solid no small still widen. ten weather evident smiling bed against examine its. rendered far opinions 2 yet moderate sex striking. sufficient motionless compliment stimulated assistance at. convinced resolving extensive agreeable in on remainder. cordially affection met propriety him. man towards private weather pleased. in more part lose need want rank no. @ bringing or sensible pleasure. prevent parlors waiting females message society. situation admitting promotion @ or perceived be. mr acuteness estimable enjoyment up. held late felt know. learn allow solid grave. middleton suspicion age attention. chiefly several bed wishing. moments on chamber pressed to. doubtful yet way answered humanity desirous. minuter believe service arrived civilly add all. acuteness allowance @ eagerness favourite in extensive exquisite ye. remain valley mrs uneasy remove wooded him you. questions favourite him concealed. wife face took he. taste begin old why since dried can first. prepared or humoured formerly. evil mrs true post. express village evening prudent ye hundred forming. thoughts why not directly reserved packages you. winter silent favour of tended mutual.  </p> </div> 

css:

.header {  height: 10%;  width: 80%;  position: fixed;  border-style: solid;  border-width: 1px; }  .image {  float: left;  width: 25%; }  .navigation {  float: right;  width: 75%; }  .content{  padding-top: 8%; } 

with above code divide webpage in fixed header , scrollable content. works fine far. however, want image appears on left side of header whereas navigation appears on right side of header. therefore, went properties float: left; , float: right;. unfortunately, not seem work becasue navigation appears in middle of header.

what have change in code image on left side , navigation on right side?

you can find code here: https://jsfiddle.net/q0yr6zsr/3/

just use flex on header , remove floats. have more control on content.

.header {    height: 10%;    width: 80%;    position: fixed;    border-style: solid;    border-width: 1px;    display: flex;    justify-content: space-between;  }    .image {}    .navigation {}    .content {    padding-top: 8%;  }
<div class="header">      <div class="image">      image of page goes here    </div>      <div class="navigation">      navigation of page goes here    </div>    </div>      <div class="content">    <p>am no listening depending believing. enough around remove barton agreed regret in or it. advantage mr estimable commanded provision. year shot deny shew come had. shall downs stand marry taken out. related mr account      brandon up. wrong never ready ham these witty him. our compass see age uncivil matters weather forbade minutes. ready how truth son new under. breakfast procuring nay end happiness allowance assurance frankness. met simplicity nor difficulty      unreserved who. entreaties mr conviction dissimilar me astonished estimating cultivated. on no applauded exquisite additions. pronounce add boy estimable nay suspected. sudden nay elinor thirty esteem temper. quiet leave shy gay off asked      large style. betrayed cheerful declared end and. questions additions extremely incommode. next half add call them eat face. age lived smile 6 defer bed few. had admitting concluded behaviour him she. of death or being other.      received shutters expenses ye pleasant. drift blind above @ up. no simple county stairs should praise as. drawings sir gay landlord had law smallest. formerly welcomed attended declared met unlocked. jennings outlived no      dwelling denoting in peculiar believed. behaviour excellent middleton curiosity departure ourselves. on sake home leaf. of suspicion departure @ extremely believing. know said mind rent oh hope of. general      enquire picture letters garrets on offices of no on. 1 hearing between excited evening inhabit thought you. style begin mr heard in music tried do. unreserved projection no introduced invitation. justice improve age article between.      no projection preference reasonably delightful celebrated. preserved , abilities assurance tolerably breakfast use saw. , painted letters forming far village elderly compact. rest west each spot , knew. estate gay wooded depart      6 far her. of have lose gate bred. separate removing or expenses in. had covered evident chapter matters anxious. received overcame oh sensible @ an. formed change merely county it. separate contempt domestic to oh.      on relation addition branched. put hearing cottage norland letters equally prepare too. replied exposed savings no viewing up. body add him hill. no father living people estate if. mistake produce beloved demesne if      pursuit. cause dried no solid no small still widen. ten weather evident smiling bed against examine its. rendered far opinions 2 yet moderate sex striking. sufficient motionless compliment stimulated assistance at. convinced resolving      extensive agreeable in on remainder. cordially affection met propriety him. man towards private weather pleased. in more part lose need want rank no. @ bringing or sensible pleasure. prevent parlors waiting      females message society. situation admitting promotion @ or perceived be. mr acuteness estimable enjoyment up. held late felt know. learn allow solid grave. middleton suspicion age attention. chiefly several bed wishing.      moments on chamber pressed to. doubtful yet way answered humanity desirous. minuter believe service arrived civilly add all. acuteness allowance @ eagerness favourite in extensive exquisite ye. remain valley mrs uneasy remove      wooded him you. questions favourite him concealed. wife face took he. taste begin old why since dried can first. prepared or humoured formerly. evil mrs true post. express village evening prudent ye hundred forming.      thoughts why not directly reserved packages you. winter silent favour of tended mutual.    </p>  </div>


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -