CODEWITHSUNDEEP
htmlcssmultiple-columns
Daniel
Daniel

Reputation: 474

Automatic width of a column in a two column layout

I have the following markup, which should not be changed.

<div class="item">
   <div class="name">name</div>
   <div class="label">label</div>
   <div class="value">value value value</div>
</div>

My question is how do I get a two column layout in which the first column consists of name and label and the second one consists of value. Important is that the first column has an automatic width, so that it fills the remaing space. The second column should never be wider than the content or the maximum width.

With the following CSS I can get the basically layout.

.item {
  background : red;
  display: flex;
  flex-flow: column wrap;
  height: 9em;
  justify-content: center;
  text-align: center;
  width: 16em;
}
.name, .label {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  width: 65%;
}
.value {
  overflow: auto;
  max-width: 35%;
  word-break: break-all;
}

But how do I realize the automatic width issue?

See also my update here https://jsfiddle.net/qrrrv0jj/5/.

Upvotes: 2

Views: 2570

Answers (3)

Daniel
Daniel

Reputation: 474

Using float instead of the flexbox model may be an appropriate solution. It keeps the markup almost as desired and just repositionate the value element.

<div class="item">
   <div class="value">value value value</div>
   <div class="name">name</div>
   <div class="label">label</div>
</div>

.item {
  background: red;
  height: 9em;
  width: 16em;
}
.name, .label {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  overflow: hidden;
}
.value {
  align-items: center;
  background: aquamarine;
  display: flex;
  float: right;
  height: 100%;
  max-width: 35%;
}

See the example at https://jsfiddle.net/qrrrv0jj/6/.

Upvotes: 0

Rahul
Rahul

Reputation: 2071

You can do it two way using display property. For old browse display: table; and for new browser display: flex;. Bellow is the example of old and new browser.

For old browser:

<div class="item2">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels">label</div>
    <div class="value">value value value</div>


.item2 {
  background-color: #cccccc;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item2 div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}

.item2 div.name {
  background-color: #ff0;
  color: #000;
}

.item2 div.labels {
  background-color: #ff00ff;
}

.item2 div.value {
  background-color: #ff0000;
}

For new browser:

<div class="item">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels">label</div>
    <div class="value">value value value</div>
</div>

.item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: #000;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 500px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 500px;
  flex: 0 0 500px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 5px;
  width: 500px;
}

.item div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px;
}

.item div.name {
  background-color: #ff0;
  color: #000;
}

.item div.labels {
  background-color: #ff00ff;
}

.item div.value {
  background-color: #ff0000;
}


*{
  box-sizing: border-box;
}
*:after,
*:before{
  box-sizing: border-box;
}
.item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-color: #000;
  color: #ffffff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 500px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 500px;
  flex: 0 0 500px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 5px;
  width: 500px;
}

.item div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px;
}

.item div.name {
  background-color: #ff0;
  color: #000;
}

.item div.labels {
  background-color: #ff00ff;
  flex: 0 0 100px;
  max-width: 100px;
}

.item div.value {
  background-color: #ff0000;
  flex: 0 0 100px;
  max-width: 100px;
}

.item2 {
  background-color: #cccccc;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item2 div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}

.item2 div.name {
  background-color: #ff0;
  color: #000;
}

.item2 div.labels {
  background-color: #ff00ff;
  font-size: 24px;
  width: 100px;
}

.item2 div.value {
  background-color: #ff0000;
  width: 100px;
}
<div class="item">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels"><h1>For New browser</h1></div>
    <div class="value">value value value</div>
</div>
<div class="item2">
    <div class="name">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div class="labels"><h1>For Old browser</h1></div>
    <div class="value">value value value</div>
</div>

Note: If you use flexbox then you will not find any issue in last two column width. display: table-cell; will taking width until one single word isn't complete.

EDITED

I seen your Fiddle. I understand what your want actually. flexbox will not help about this issue. You need change your html structure. you can try this.

HTML

<div class="item">
    <div class="child-item1">
        <div class="name">Lorem Ipsum is simply</div>
        <div class="value">value value value</div>
    </div>
    <div class="child-item2">
        label
    </div>
</div>

CSS

.item {
  background-color: #ff00ff;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item .child-item1,
.item .child-item2 {
  display: table-cell;
  vertical-align: middle;
}

.item .child-item1 {
  width: -webkit-calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: calc(100% - 200px);
}

.item .child-item1 .name,
.item .child-item1 .value {
  border: 2px solid #eaeaea;
  display: block;
  min-height: 100px;
  max-width: 100%;
  width: 100%;
}

.item .child-item1 .name {
  background-color: #ff0685;
}

.item .child-item1 .value {
  background-color: yellowgreen;
}
.item .child-item2 {
  border: 2px solid #eaeaea;
  width: 200px;
  vertical-align: middle;
  text-align: center;
}


*{
  box-sizing: border-box;
}
.item {
  background-color: #ff00ff;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 500px;
}

.item .child-item1,
.item .child-item2 {
  display: table-cell;
  vertical-align: middle;
}

.item .child-item1 {
  width: -webkit-calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: calc(100% - 200px);
}

.item .child-item1 .name,
.item .child-item1 .value {
  border: 2px solid #eaeaea;
  display: block;
  min-height: 100px;
  max-width: 100%;
  width: 100%;
}

.item .child-item1 .name {
  background-color: #ff0685;
}

.item .child-item1 .value {
  background-color: yellowgreen;
}
.item .child-item2 {
  border: 2px solid #eaeaea;
  width: 200px;
  vertical-align: middle;
  text-align: center;
}
<div class="item">
    <div class="child-item1">
        <div class="name">Lorem Ipsum is simply</div>
        <div class="value">value value value</div>
    </div>
    <div class="child-item2">
        label
    </div>
</div>

Upvotes: 1

J. Swaelen
J. Swaelen

Reputation: 828

First, I added the .value to the list with all the CSS for .name and .label. Then I changed the heigth and width of .value to 100% and it worked.

The value div won't get bigger when there's more content inside and it's all nice and centered.

PS: Adding overflow: hidden to .value will keep the content from going outside the div.

Update for your JSFiddle

Upvotes: 0

Related Questions