Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS div's overlapping

I am trying to build a comments section for my website. In the comments section, I want it laid out WordPress-style, with the avatar to the left. It works, but what is happening is the comment text is wrapping around the avatar underneath. For an example, here. This probably has a simple solution to it but I am a CSS amatuer. This is the relevant XHTML and CSS:

/*------- COMMENTS -------*/

#comments {
  width: 91px;
  height: 18px;
  background: url(images/comments.png) no-repeat;
  text-indent: -9000px;
  margin-bottom: 10px;
}

div.comment {
  padding: 5px 5px 30px 5px;
  background: url(images/commentbar.png) bottom center no-repeat;
  margin-bottom: 10px;
}

div.comment div.left {
  margin-left: 10px;
  float: left;
  width: 51px;
}

div.comment div.right {
  width: 482px;
}

div.comment div.right h3 {
  color: #e6267c;
  font-size: 18px;
  display: inline;
  text-transform: uppercase;
}
<div class="comment">
  <div class="left">
    <img src="images/noavatar.png" alt="No Avatar" />
  </div>

  <div class="right">
    <h3>Laura Brauman</h3>
    <span>12 March 09</span>
    <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus
      risus. Pellentesque lacus sem, luctus tempus.</p>
  </div>
</div>
like image 729
Tom Avatar asked Apr 03 '09 02:04

Tom


People also ask

How do you stop divs from overlapping in CSS?

Make sure that you include a margin as well. That will prevent overlapping. Divs are block level by default anyway.

Why are my divs overlapping CSS?

This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.

Why is div content overlapping?

Overlapping comes when the display option is set to fixed or absolute in css. Make the divs display to block and height to auto.


1 Answers

From the spec:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

That means elements with display: block that are not positioned ignore the float.

However, line boxes created next to the float are shortened to make room for margin box of the float.

That means inline elements do flow around floats. That's why your <span> and the text within <p> flows around div.left, even though the <p> and div.right do not.

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

And, that - obtuse as it is - is the answer to your problem. You must insert a "new block formatting context".

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

The easiest of these for you is1:

div.right { overflow: auto; }

Note that you probably also want1:

div.comment { overflow: auto; }

To fix a related, but different problem. If your <p> content is shorter than your image, then the floated div.left will not expand the height of div.comment. Adding overflow: auto; takes you into the aptly named Complicated Cases portion of the spec:

If the [Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible'] element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges

Which basically says that floats only expand overflow <> visible containing elements.

1 overflow: hidden; would also work, but would crop content instead of throwing scrollbars if needed.

like image 134
Mark Brackett Avatar answered Oct 28 '22 14:10

Mark Brackett