CSS Float Horizontal Overflow

Question

I have the following jsfiddle: https://jsfiddle.net/CLight/1emh82cv/

This is a recursive structure where it consists of two twin cells sharing the top row, and one cell in the second/bottom row. The three cells will be recursively inserted into the bottom cell. I am trying to figure out how to make the cells expand horizontally when they overflow, without breaking the structure. Thanks a bunch.

Here's the html:

 <div class="cell-main">
  <div class="cell-left">
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
  </div>
  <div class="cell-right">
    test
  </div>
  <div class="cell-bottom">
    <div class="cell-left">
      test
    </div>
    <div class="cell-right">
      test
    </div>
    <div class="cell-bottom">

      <div class="cell-left">
        test
      </div>
      <div class="cell-right">
        test
      </div>

    </div>
  </div>
</div>

Here's the CSS:

*{
    box-sizing: border-box; 
}
div{
  border: 1px solid black;
}

.cell-left {
    height: 100%;
    padding: 5px;
    width: 50%;
    float: left;
    text-align:left
}

.cell-right {
    height: 100%;
    padding: 5px;
    width: 50%;

    float: left;
    text-align:right
}

.cell-bottom {
    height: 100%;
    padding: 5px;
    width: 94%;
    margin-left: 3%;
    float: left;
}

.cell-main {
    height: 100%;
    padding: 5px;
    width: 100%;
    float:left;
}

EDIT: Updated jsfiddle and title.

Felix Haeberle · Accepted Answer · 2017-12-11 02:08:50Z

1

I think you are searching for the overflow-wrap property.

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. (Mozilla MDN)

This property can have the following values, in case you need it recursive, the global values can be interesting for you:

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

If you want to keep the height of the parcel use overflow: auto on the main div's.

See my code snippet!

*{
    box-sizing: border-box; 
}
div{
  border: 1px solid black;
  overflow-wrap: break-word;
}

.cell-left {
    height: 100%;
    padding: 5px;
    width: 50%;
    float: left;
    text-align:left
}

.cell-right {
    height: 100%;
    padding: 5px;
    width: 50%;

    float: left;
    text-align:right
}

.cell-bottom {
    height: 100%;
    padding: 5px;
    width: 94%;
    margin-left: 3%;
    float: left;
}

.cell-main {
    height: 100%;
    padding: 5px;
    width: 100%;
    float:left;
}

<div class="cell-main">
  <div class="cell-left">
    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
  </div>
  <div class="cell-right">
    test
  </div>
  <div class="cell-bottom">
    <div class="cell-left">
      test
    </div>
    <div class="cell-right">
      test
    </div>
    <div class="cell-bottom">

      <div class="cell-left">
        test
      </div>
      <div class="cell-right">
        test
      </div>

    </div>
  </div>
</div>

edited Dec 11, 2017 at 2:08

answered Dec 11, 2017 at 1:48

Felix Haeberle

1,61414 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5056973 Over a year ago

Thanks for the reply @felix-häberle. Unfortunately, line breaks are not an option for me. I am trying to make the cells expand horizontally. Is that possible?

user5056973 Over a year ago

I figured it out. Your solution pointed me to the right direction. Turns out 'overflow: auto' on the main div is all what I needed. Thanks!

Collectives™ on Stack Overflow

CSS Float Horizontal Overflow

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related