Home/ Questions/Q 7923581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T17:22:16+00:00

I am trying to create a web page where there are 2 divs next

  • 0

I am trying to create a web page where there are 2 divs next to each other that are flexible. So that when the browser window is compressed together, each of the divs shrink with the width of the browser (up to a certain point). THe issue that I’m having is that with the solution below, when the browser window gets small enough, the divs dont shrink, instead the line just breaks between them…

I know I’m missing somthing simple… just don’t know what it is:

<html>
<body>

<div style="border-style:solid;border-color:green;max-width:100%;overflow: hidden;">
  <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
  <div style="overflow: hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div>
</div>

<body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use CSS display:table-cell property for this. Write like this:

    .parent{
    display:table;
    width:100%;
}
.parent > div{
    display:table-cell;
    min-width:100px;
    background:red;
}
.parent > .right{
    background:green;
}

    Check this: http://jsfiddle.net/Ld3r6/

    • 0