CODEWITHSUNDEEP
htmlcss
Looper
Looper

Reputation: 364

html + CSS - split columns when cells have multiple lines of text

I have been trying to split rows of text using CSS for a particular div (the intended behavior is analogous to have a table with two columns).

I want the first column to have a fixed width, and that the second column to use the rest of the space. My problem is that, when the right column has a long text and I resize the size of my browser window (as if I were using a cellphone, for example), the right column is moved down.

This is the intended behavior:

-------------------------------------------------------------------------
Text 1  | This is a long text. This is a long text. This is a long text. 
        | This is a long text. This is a long text. 
-------------------------------------------------------------------------

What I get after resizing my browser window to a smaller resolution is this:

-------------------------------------------------------------------------
Text 1  
This is a long text. This is a long text. This is a long text. This is a 
long text. This is a long text. 
-------------------------------------------------------------------------

The code I'm using is the following:

div.columns { width: 50%; margin: auto; }

div.columns div { float: left; }
div.columns div.col1 { width: 50px; }
div.columns div.col2 { width: 800px; }

div.clear { clear: both; }
<div class="columns">
  <div class="col1">Text 1</div>
  <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div>
</div>
<div class="clear"></div>

This obviously happens when the window size is less than 850px. How can I specify that the width of col2 is what is left after setting the width of col1 equal to 50px, while keeping the intended behavior?

Upvotes: 1

Views: 1798

Answers (2)

S.Serpooshan
S.Serpooshan

Reputation: 7450

I think this is a better solution as it doesn't require calc:

just use display: table; for parent div and display: table-cell; for columns as following:

div.columns { 
  display: table; width: 50%; margin: auto; border: 1px solid black; 
}
  
div.columns div.col1 { display: table-cell; width: 50px; background: #f0fff0; }

div.columns div.col2 { display: table-cell; background: #f4f4ff; } 
/*no width required for second div, it will auto-fill remaining width */
<div class="columns">
  <div class="col1">Text 1</div>
  <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div>
</div>
<!--<div class="clear"></div> *** not required! -->

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13699

Make use of calc. So you can have your right element the 100% size of the parent's element minus the width of your left element as it's width.

So for your div.columns div.col2:

div.columns div.col2 {
  width: calc(100% - 50px);
}

Fiddle

Upvotes: 2

Related Questions