CODEWITHSUNDEEP
htmlcss
Budda
Budda

Reputation: 18343

How to prevent exceeding the parent's boundary?

I have data inside of divs:

-------------------------------------
| ----------   ------------------   |
| | Pane L |   |   D A T A      |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   |                |   |
| ----------   |                |   |
|              -----------------|   |
-------------------------------------

Parent's is determined based on size of "Data" panel.

In case if Pane L is TOO long (longer than Data) then it exceeds the boundary of its parent and doesn't pull parents boundary...

-------------------------------------
| ----------   ------------------   |
| | Pane L |   |   D A T A      |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   -----------------|   |
--|        |-------------------------
  |        |
  ----------

CSS Style of "Pane L" among others contain: "float: left"

"Data" contains: "position: relative"

How to prevent Pane L exceeding the boundary of the parent?

I know there is something wrong with my CSS formatting, but can't figure out what exactly is wrong.

Any ideas are welcome!

EDIT: I've put solution recommended by rbighne, but it has side effect: empty space right from DATA panel and between Data and PaneL become squizzed... is there any solution that doesn't have any horizontal impact?

Upvotes: 2

Views: 85

Answers (2)

rvighne
rvighne

Reputation: 21897

You are looking for the clearfix.

.parent:after {
    content: "";
    display: table;
    clear: both;
}

(Assuming that the parent has class parent of course), this will make sure that Pane L pushes the bottom of the parent down until the parent is only as tall as Pane L.

Upvotes: 2

helion3
helion3

Reputation: 37381

You should use overflow: hidden on the parent container, but that will also cut off the longer content inside the pane L. Use overflow-y: scroll to allow the contents to scroll inside.

Upvotes: 0

Related Questions