Two divs inside a parent div, one with fixed width, the other with flexible width

HTML & CSS
1

I have one parent div with two childs div, with the one on the left has a fixed width of 300px with border of 1px, the one on the right would be flexible and now I explain what I have done:

When on my screen my browser window is maximized, I have measuered the inner width in px of the parent, the percentage of a child div, if I am right, is relative to its parent, so I have the left div with a fixed 300px, and a right div with a flexibile width, therefore I have calculated its percentage width in this way:

1264px - is the inner width of the parent
960px - is the inner width of the box on the right with 1px borders, but I want to calculate it in percentage:

if 1264px is the 100% of the parent, what is the percentage width of the child with a width of 960px? Set this proportion:

1264px : 100% = 960px : x
x = (960 * 100)/1264 = 75,94936708860759%

so, with a maximized browser window I obtain the right width of the right div, but, when I begin to reduce the window, the right div goes below, but I do want that the right div remains in the same line but with a flexibile/elastic width.

I hope I have explained rightly the problem! Can you help me please, thanks!

Here is the fiddle:

Here is my code:

<style>
   #parent {
      border: 1px solid red;
      width: 100%;
      float: left;
   }
   #leftdiv {
      float: left;
      border: 1px solid blue;
      width: 300px;
      height: 200px;
   }
   #rightdiv {
      float: left;
      background: tomato;
      border: 1px solid green;
      width: 75.94936708860759%;
      height: 200px;
   }
</style>
<!DOCTYPE html>
<html lang='it'>
   <head>
      <title></title>
      <meta charset='utf-8'>
      <meta name='description' content=''>
      <meta name='keywords' content=''>
      <meta name='author' content=''>
      <meta name='robots' content='all'>
      <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
      <link href='/favicon.png' rel='shortcut icon' type='image/png'>
   </head>
   <body>
      <div id="parent">
        <div id="leftdiv">left content</div>
        <div id="rightdiv">right content</div>
      </div>
   </body>
</html>
2

Looks like you are over thinking it with those calculations. Forget floats and try display: table.
If the parent is 100%, the left is fixed at 300px, the right will take whatever space remains.

4 Likes
3

Hi there franciska,

to add to @SamA74’s “display: table” method,
here is a “display: flex” example…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }
#parent {
    display: flex;
    border: 0.06em solid #999;
    background: #fff;
 }
#leftdiv {
    flex: none;
    width: 18.75em;
    padding: 1em;
    border-right: 0.06em solid #999;
    box-sizing: border-box;
 }
#rightdiv {
    padding: 1em;
    background: #ff6347;
 }
@media screen and (max-width:30em) {
#parent {
    display: block;
  }
#leftdiv {
    width: auto;
    border-right: 0;
    border-bottom: 0.06em solid #999;
  }
 }
</style>

</head>
<body> 
<div id="parent">
 <div id="leftdiv">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
   posuere ac lorem ut, suscipit tincidunt leo.
  </p>
 </div>
 <div id="rightdiv">
  <p>
   Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
   purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
   Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
   nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
   penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique 
   varius ullamcorper.
  </p>
 </div>
</div>

</body>
</html>

coothead

4 Likes
4

Hi, @SamA74 already gave you a good solution, and then @coothead another. But there are more alternatives.

If you for some reason need the floats or maybe want the right div still being able to drop below, you can fix your CSS by removing the float and width on “rightdiv” and make it aware of the floated “leftdiv”. You can try this:

#parent {
  border: 1px solid red;
  width: 100%;
  float: left;
  box-sizing: border-box; /* added (width includes padding and border) */
}
#leftdiv {
  float: left;
  border: 1px solid blue;
  width: 300px;
  height: 200px;
}
#rightdiv {
  /* float: left; */
  background: tomato;
  border: 1px solid green;
  /* width: 75.94936708860759%; */
  height: 200px;
  overflow: hidden; /* added (makes it aware of floats) */
2 Likes
5

many thanks! You gave me so many good solution!

@Erik_J can you explain me better, what is the task of that overflow: hidden in your example? Thanks!

6

Glad you asked.

For a box in the flow the default overflow value is “visible” and content will show outside the box if it dosn’t fit.
With other values of overflow, like e.g. “hidden” or “auto” the browser needs to decide if the content fits or not. Now if it have to deal with a float, it must decide if the float is inside or outside the box, and make the box include the float or stay away from it.

More info about boxes: https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
About overflow: https://css-tricks.com/the-css-overflow-property/
w3.org about overflow: https://www.w3.org/TR/CSS21/visufx.html

2 Likes
7

Excellent! Many thanks also for the external references! :slight_smile:

1 Like
8

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