CODEWITHSUNDEEP
htmlcssscrollcss-position
BurebistaRuler
BurebistaRuler

Reputation: 6519

div with fixed position cannot be scroled

I have <div> with position:fixed and I want to have a scroll for that div when browser is resized. I already tried overflo:auto and other but is not working. If someone can help me with this ...Thank's.

<div class="div1">
   <span class="l">1</span>
   <span class="l">2</span>
   <span class="l">3</span>
  <span class="l">4</span>
  <span class="r">4</span>
  <span class="r">3</span>
  <span class="r">2</span>
  <span class="r">1</span>
</div>

css

 .div1{
      background:lime;
      width:45pc;
      height:50px;
      position: fixed;
      overflow-x: scroll;
    }

    .l{
      float: left;
    }

    .r{
      float:right;
    }

fiddle: http://jsfiddle.net/Ksb2W/158/

Upvotes: 0

Views: 205

Answers (3)

MadCom
MadCom

Reputation: 241

You need another div inside 

<div class="div1">
  <div class="ins">
   <span class="l">1</span>
   <span class="l">2</span>
   <span class="l">3</span>
  <span class="l">4</span>
  <span class="r">4</span>
  <span class="r">3</span>
  <span class="r">2</span>
  <span class="r">1</span>
  </div>
</div>

and some changes to css.

.div1{
  background:lime;
  width:100%;
  height:50px;
  position: fixed;
  overflow-x: scroll;

}
.ins{
  min-width:45pc;
  height:50px;

}

.l{
  float: left;
}

.r{
  float:right;
}

here's fiddle: http://jsfiddle.net/Ksb2W/189/

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

Change your width:45pc; to width:45px;. Then everything works as expected.

When you use pica then your width is 16 * 45 px (720px), because 1pc=16px. If you want to keep pc as unit you need to use in your case width:2.8125pc;

Upvotes: 1

Christofer Vilander
Christofer Vilander

Reputation: 18022

Looks like you type a c instead of an x, so change width:45pc; to width:45px;. That should fix it.

Upvotes: 1

Related Questions