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

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'>
<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'> -->
<body>
<div id="parent">
<div id="leftdiv">left content</div>
<div id="rightdiv">right content</div>
</div>
</body>
</html>
``````

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

Hi there franciska,

to add to @SamA74â€™s â€śdisplay: tableâ€ť method,
here is a â€śdisplay: flexâ€ť exampleâ€¦

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

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

<title>untitled document</title>

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

<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>``````

4 Likes

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;
}
#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

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!

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.