CODEWITHSUNDEEP
htmlcss
Berry Blue
Berry Blue

Reputation: 16512

Div not resizing below floating element

I'm having an issue where a div is not resizing after being push down by other content. I've attached an example. Click the "Toggle Content" button to see the issue. If you resize the browser the div will snap back to full width. Is there a way to correct this issue?

I've also included a screenshot to show the behavior since it doesn't seem to happen on all browsers. It happens consistently in Safari. When you press the "Toggle Content" button the last div "4)" does not expand unless you resize the browser.

enter image description here

document.getElementById("button").onclick = function() {
  var display = document.getElementById("two").style.display == "none" ? "block" : "none";
  document.getElementById("two").style.display = display;
  document.getElementById("three").style.display = display;
}
#float
{
  float:left;
}
#float > img
{
  float:left;
  width: 300px;
  height: 300px;
}
.content
{
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
}
<button id="button">Toggle Content</button>
<br><br>
<div id="float"><img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201703170823"></div>
<div class="content">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="two" class="content" style="display: none">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="three" class="content" style="display: none">3) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="content">4) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Upvotes: 1

Views: 174

Answers (3)

Erwin Bujak
Erwin Bujak

Reputation: 1

  1. Replace margin: 10px; in .content to margin: 10px 10px 10px 310px;

    OR

  2. Create new div "#contents" after div "#float" and add it in css "overflow: hidden;" and put in all .content elements

    OR

  3. Use CSS Grid

Upvotes: 0

Joseph
Joseph

Reputation: 760

Wrap all of the content divs in a parent div:

<div>
    <div class="content">1) Lorem ipsum dolor</div>
    <div id="two" class="content" style="display: none">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div id="three" class="content" style="display: none">3) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="content">4) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>
</div>

This looks like a browser bug where the moved div is not being repainted, possibly because it is not being recognized as changed.

Wrapping the whole group in a parent div seems to work around this by triggering a proper resize/repaint of all the children when any of them are changed.

Upvotes: 1

everyonesdesign
everyonesdesign

Reputation: 364

If I understood you correctly you ask about the bottom div which takes full width here.

You use the ability of 'overflow: hidden' to ignore the floats rather than clear them. But you wrap each paragraph in a separate div with 'overflow: hidden' and that makes them take as many space as they can, because they set their width independently.

To restrict their width to the first paragraph value you should wrap them in a one common container with 'overflow: hidden'. Here's an example in JSFiddle, I added '.content-wrap' class:

.content-wrap
{
  overflow: hidden;
}

But I think that more popular solution of the problem is to add left padding to the parent of float and then add a negative left margin to the float to move it to the left edge (see JSFiddle).

Upvotes: 0

Related Questions