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

Shrink border of a HTML element which shares space with a floating element

When a floating element takes up some space, the "normal" text makes room to accommodate the floating element. But the border around the normal text does not and instead intersects with the floating element.

In the example below, how can I make the first red box end before the blue box starts with some gap, and not overlap? And let the second red box, which does not need to share space with the floating element, still take up 100%?

div#toc {
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid blue;
}

div.warn {
  padding: 20px;
  border: 1px solid red;
}
<div id="toc">
  <h2>Table of contents</h2>
  <ol>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
  </ol>
</div>
<div id="main">
  <h1>Chapter 1</h1>
  <p>In the beginning ...</p>
  <div class="warn">
    Fairy tale, watch out!
  </div>
  <p>... and were married happily ever after.</p>
  <div class="warn">
    Don't retell!
  </div>
</div>
Tags:

2

Answers


  1. 0

    No can do. Use a different design.

    #toc, #main {
  transition: 1s;
}

#toc {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -220px;
  width: 240px;
  background: blue;
  padding: 20px;
  box-sizing: border-box;
}

#toc:hover {
  right: 0;
  border: 1px solid blue;
  background: white;
}

#main {
  margin-right: 40px;
}

#toc:hover + #main {
  margin-right: 260px;
}

div.warn {
  padding: 20px;
  border: 1px solid red;
}
    <div id="toc">
  <h2>Table of contents</h2>
  <ol>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
  </ol>
</div>
<div id="main">
  <h1>Chapter 1</h1>
  <p>In the beginning ...</p>
  <div class="warn">
    Fairy tale, watch out!
  </div>
  <p>... and were married happily ever after.</p>
  <div class="warn">
    Don't retell!
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Block-level boxes that establish an independent formatting context shrink to avoid floats. The most direct way to make a box establish a block formatting context (the most suitable type of independent formatting context in this case) is to give it display: flow-root.

    Use margin on the float to create the gap.

    div#toc {
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid blue;
  margin-left: 10px;
}

div.warn {
  padding: 20px;
  border: 1px solid red;
  display: flow-root;
}
    <div id="toc">
  <h2>Table of contents</h2>
  <ol>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
  </ol>
</div>
<div id="main">
  <h1>Chapter 1</h1>
  <p>In the beginning ...</p>
  <div class="warn">
    Fairy tale, watch out!
  </div>
  <p>... and were married happily ever after.</p>
  <div class="warn">
    Don't retell!
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search