CODEWITHSUNDEEP
htmlcss
Roland Seuhs
Roland Seuhs

Reputation: 1995

How to create two <div>s with one taking up maximum width

I have a table that needs to be transformed into CSS-based layout, because of responsive-design requirements:

<table>
<tr><td>minimal width</td><td width="100%">maximum width</td></tr>
</table>

Is it possible to create two div s that replace the two td s in the above example?

Unfortunately, the answers to this question is not appropriate, because the first answer uses a fixed width for the left column and the in the second answer any 100% width-element on the right side causes the right div to slide under the left one. I need the same behavior as the table: Use the maximum available width, keep on the right side and use horizontal scrolling if not enough space is available.

Is it possible to do?

Upvotes: 0

Views: 70

Answers (2)

JoeL
JoeL

Reputation: 710

Try this code in your window for your own results. When I run this in snippets, it functions correctly.

The div id=one has a fixed 100px width. The max-width for div id=two is decided in the jQuery in which it gets the width of the window you currently are using, and it subtracts the amount of the fixed width of the div id=one.

The div that encompasses them all has a flex display to erase the blank space that generally shows up between divs, which adds pixels and would make the 100% - 100px width still appear on the line below because it would be too big.

$("#two").css("max-width", ($(window).width() - 100) + "px");
#one {
  display:inline-block;
  width: 100px;
  border: 2px solid black;
}
#two {
  display:inline-block;
  border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:flex">
<div id="one">stuff</div><div id="two">more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff more stuff</div>
</div>

Upvotes: 0

j08691
j08691

Reputation: 207891

Sure, like this:

div {
  display:table-cell;
  border:1px solid #999;
}
#b {
  width:100%;
}
<div id="a">
  a
</div>
<div id="b">
  b
</div>

Upvotes: 1

Related Questions