Question 215366 in Html Question posted in
Some basic documentation can be found here.

Html – Vertical Scrolling in irregular shape div

I have a irregular shaped div

enter image description here

code as follows

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}
<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

It is expanding if I type, but we want it in a fixed height, if I make it scrollable, it follows a "hard" limit on the horizontal length.

enter image description here

Is it possible to have a scrolling css/style property where it allows scrolling of unusual shapes?

Tags:

2

Answers


  1. 0

    Actually, the div is not shaped irregular at all. The div is a rectangle and behind the ‘floating’ items. You are hiding that fact by creating the blue borders for the red squares. The only thing happening is that the content of the div is actually working in your favor and not hiding behind the floating objects. I adjusted your CSS a little to prove my point.

    Since not the content but the div itself is made scrollable the scrollbar would always hide behind the red squares. It won’t shape around the red squares because that’s just not how the style structure works. It would create a lot of potential bugs in other applications if that is how float and overflow would work together.

    Short answer: it won’t be possible. It is either full width or small but it won’t flow like the textcontent does.

    .block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  margin: 10px;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  margin: 10px;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
  max-height: 120px;
}

.parent {
  height: 300px;
  width: 500px;
}
    <div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The only solution to make the div with text in it scrollable with the floating elements interacting with the text is to place the floating divs along with the text.

    It messes up the borders, but you can’t have both, specifically you will not be able to have the scrollbar on top of the right floating div

    .block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
  height: 100px;
  overflow-y: auto;
}

.parent {
  height: 300px;
  width: 500px;
}
    <div class="parent">
  <div class="div2" contenteditable="true">
    <div class="block_left"></div>
    <div class="block_right"></div>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search