Pink box spreading enough having breaks in text in yellow box

HTML & CSS
1

I have a page at http://dot.kr/x-test/html/middle/middle.php

The page has 3 wraps, and each wrap has 3 boxes.
They are yellow box in the left, pink box in the center, and yellowGreen box in the right.

The center box in pink is not spreaded enough in wrap1.

The center box in pink is spreaded enough but the text in yellow box is falled in wrap2.

The center box in pink is spreaded enough and the text in yellow box is not falled in wrap3.
This is what I want.

But if you look closely,
you will find the text in yellow box has not any breaks.

How can I make it looks like the wrap3 with some breaks in text which is in the yellow box?

I want the yellow box in the left and the yellowGreen box in the right are automatically fitted by the text in the box.
and the pink box in the center is fully spread to all the rest…

2

I think you’ll find that the 100% width value set on the pink box is what’s causing it - try a smaller value perhaps?

3

When using display table, by default, the widths will depend on the content, as in the top example. If the pink box had wider content, it would expand to contain it.
In the middle and bottom examples, the problem you have is that you set the pink box to 100% width. This pushes the others to a minimum. You can set specific widths, but using %, but the total must not exceed 100. Eg, yellow could be 30%, pink 50% and green 20%. Though you could define only 1 or 2 of them, as the others would take the space left over and avoid a mis-calculation.

5

Make it less than 100%, Eg, 40 or 50%, whatever proportion you want. 100% is the full width, so leaves no spare space for the other two, that is making them cramped.

6

I think we have a slight misunderstanding here - currently that pink box IS set to 100% width. That value needs to be reduced.

7

if I reduce the width by 50% at http://dot.kr/x-test/html/middle/middle2.php, pink box is not speaded enough.

I mean the useless space in the right of the yellow box and in the left of the yellowGreen box.

8

Then make it 60%, or 70%, or 80%. But not 100%.
Or fix the sizes of the side columns to what you want, and the pink will take all that is left over.

9

Like this:-

3 Likes
10

The only way you can do this without sizing the outer columns is to add white-space:nowrap to the outer cell columns. Keep the width:100% on the middle column to keep it as wide as possible.

Of course it depends on what the real data is going to look like. If you want the outer cells to contain wrapping text then you will have to give them a width as Sam has shown above.

For modern browsers flexbox makes this easy.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#wrap2{display:flex;border:1px solid #000;}
.left,.right{background:yellow}
.mid{background:pink;text-align:center;flex:1}
.left,.right,.mid{padding:10px;}
</style>
</head>

<body>
<div id="wrap2">
  <div class="left">Text in yellow box.<br>
    Text in yellow box. </div>
  <div class="mid">center</div>
  <div class="right">Text in Yellow box.</div>
</div>
</body>
</html>

11

Hi there joon1,

this example is basically the same as Paul’s
but has the content vertically centered. :sunglasses:

[code]

untitled document #wrap { display:flex; align-items:stretch; flex-wrap:nowrap; } #wrap div { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:10px; border:1px solid #666; border-radius:5px; } #wrap div:nth-child(1) { background-color:#ff0; } #wrap div:nth-child(2) { flex:2; margin:0 0.5%; background-color:#ffc0cb; } #wrap div:nth-child(3) { background-color:#adff2f; }
Text in yellow box.
Text in yellow box.
center
Text in greenYellow box.
[/code]

coothead

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.