I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.
#search {_x000D_
width: 160px;_x000D_
height: 25px;_x000D_
float: left;_x000D_
background-color: #ffffff;_x000D_
}_x000D_
_x000D_
#navigation {_x000D_
width: 780px;_x000D_
float: left;_x000D_
background-color: #A53030;_x000D_
}<div id="search">Text</div>_x000D_
<div id="navigation">Navigation</div>This question is related to
html
css
width
responsive
I have a very simple solution for this ! //HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
//CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
If you don't need compatibility with older versions of certain browsers (IE 10 8 or less for example) you can use the calc() CSS function:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
/* * css */
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/* * html */
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
You can use the Grid CSS properties, is the most clear, clean and intuitive way structure your boxes.
#container{_x000D_
display: grid;_x000D_
grid-template-columns: 100px auto;_x000D_
color:white;_x000D_
}_x000D_
#fixed{_x000D_
background: red;_x000D_
grid-column: 1;_x000D_
}_x000D_
#remaining{_x000D_
background: green;_x000D_
grid-column: 2;_x000D_
}<div id="container">_x000D_
<div id="fixed">Fixed</div>_x000D_
<div id="remaining">Remaining</div>_x000D_
</div>Boushley's answer seems to be the best way to go in order to arrange this using floats. However, it isn't without its problems. Nested floating within the expanded element will not be available to you; it will break the page.
The method shown basically "fakes it" when it comes to the expanding element - it isn't actually floating, it's just playing along with the fixed-width floated elements using its margins.
The problem then is exactly that: the expanding element isn't floated. If you try and have any nested floating within the expanding element, those "nested" floated items aren't really nested at all; when you try to stick a clear: both; under your "nested" floated items, you'll end up clearing the top-level floats as well.
Then, to use Boushley's solution, I'd like to add that you should place a div such as the following: .fakeFloat { height: 100%; width: 100%; float: left; } and place this directly within the expanded div; all the expanded div's contents should go then within this fakeFloat element.
For this reason, I'd recommend using tables in this specific case. Floated elements really aren't designed to do the expansion that you'd like, whereas the solution using a table is trivial. An argument is generally made that floating is more proper for layouts, not tables.. but you aren't using floating here anyways, you're faking it - and that sort of defeats the purpose of the stylistic argument for this specific case, in my humble opinion.
I had a similar problem and I found the solution here: https://stackoverflow.com/a/16909141/3934886
The solution is for a fixed center div and liquid side columns.
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
If you want a fixed left column, just change the formula accordingly.
.container {_x000D_
width:100%;_x000D_
display:table;_x000D_
vertical-align:middle;_x000D_
}_x000D_
_x000D_
.left {_x000D_
width:100%;_x000D_
display:table-cell;_x000D_
text-align:center;_x000D_
}_x000D_
_x000D_
.right {_x000D_
width:40px;_x000D_
height:40px;_x000D_
display:table-cell;_x000D_
float:right;_x000D_
}<div class="container">_x000D_
<div class="left">Left</div>_x000D_
<div class="right">Right</div>_x000D_
</divTry this. It worked for me.
Rules for items and containers;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Use white-space: nowrap; for texts in last items for their undestructuring.
Item X% | Item Y% | Item Z%
Total length always = 100%!
if
Item X=50%
Item Y=10%
Item z=20%
then
Item X=70%
Item X is dominant (first items are dominant in table CSS layout)!
Try max-content; property for div inside for spreading div in container:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Here is a little fix for accepted solution, which prevents right column from falling under the left column. Replaced width: 100%; with overflow: hidden; a tricky solution, if somebody didn't know it.
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[edit] Also check an example for three column layout: http://jsfiddle.net/MHeqG/3148/
I tried the above solutions for a liquid left, and a fixed right but non of them worked (I am aware the question is for the reverse but I think this is relevant). Here's what did work:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
I wonder that no one used position: absolute with position: relative
So, another solution would be:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
The solution comes from the display property.
Basically you need to make the two divs act like table cells. So instead of using float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div you need to set width:auto; also. The both divs should be placed into a 100% width container with the display:table property.
Here is the css:
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
And the HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANT:For Internet Explorer you need to specify the float property on the dynamic width div, otherwise the space will not be filled.
I hope that this will solve your problem. If you want, you can read the full article I wrote about this on my blog.
I had a similar issue and came up with the following which worked well
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
This method won't wrap when the window is shrunk but will auto expand the 'content' area. It will keep a static width for the site menu (left).
And for auto expanding content box and left vertical box(site menu) demo:
These days, you should use the flexbox method (may be adapted to all browsers with a browser prefix).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The easiest solution is to use margin. This will also be responsive!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
If you are trying to fill remaining space in a flexbox between 2 items, add the following class to a an empty div between the 2 you want to seperate:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Use display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
@Boushley's answer was the closest, however there is one problem not addressed that has been pointed out. The right div takes the entire width of the browser; the content takes the expected width. To see this problem better:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
The content is in the correct place (in Firefox), however, the width incorrect. When child elements start inheriting width (e.g. the table with width: 100%) they are given a width equal to that of the browser causing them to overflow off the right of the page and create a horizontal scrollbar (in Firefox) or not float and be pushed down (in chrome).
You can fix this easily by adding overflow: hidden to the right column. This gives you the correct width for both the content and the div. Furthermore, the table will receive the correct width and fill the remaining width available.
I tried some of the other solutions above, they didn't work fully with certain edge cases and were just too convoluted to warrant fixing them. This works and it's simple.
If there are any problems or concerns, feel free to raise them.
Since this is a rather popular question, I'm inclined to share a nice solution using BFC.
Codepen sample of the following here.
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
In this case, overflow: auto triggers context behavior and makes the right element expand only to the available remaining width and it will naturally expand to full width if .left disappears. A highly useful and clean trick for many UI layouts, but perhaps hard to understand the "why it works" at first.
Try adding position relative, remove width and float properties of the right side, then add left and right property with 0 value.
Also, you can add margin left rule with the value is based on the left element's width (+ some pixels if you need space in between) to maintain its position.
This example is working for me:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
I have been working on this problem for two days and have a solution that may work for you and anyone else trying to make a responsive Fixed width left and have the right side fill in the remainder of the screen without wrapping around the left side. The intention I assume is to make the page responsive in browsers as well as mobile devices.
Here is the Code
// Fix the width of the right side to cover the screen when resized_x000D_
$thePageRefreshed = true;_x000D_
// The delay time below is needed to insure that the resize happens after the window resize event fires_x000D_
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed _x000D_
setTimeout(function(){_x000D_
fixRightSideWidth();_x000D_
$('.right_content_container').show(600);_x000D_
}, 50);_x000D_
_x000D_
// Capture the window resize event (only fires when you resize the browser)._x000D_
$( window ).resize(function() {_x000D_
fixRightSideWidth();_x000D_
});_x000D_
_x000D_
function fixRightSideWidth(){_x000D_
$blockWrap = 300; // Point at which you allow the right div to drop below the top div_x000D_
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left_x000D_
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){_x000D_
$('.right_content_container').width( $normalRightResize );_x000D_
$('.right_content_container').css("padding-left","0px");_x000D_
_x000D_
/* Begin test lines these can be deleted */_x000D_
$rightrightPosition = $('.right_content_container').css("right");_x000D_
$rightleftPosition = $('.right_content_container').css("left");_x000D_
$rightwidthPosition = $('.right_content_container').css("width");_x000D_
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);_x000D_
/* End test lines these can be deleted */_x000D_
_x000D_
_x000D_
}_x000D_
else{_x000D_
if( $('.right_content_container').width() > 300 ){_x000D_
$('.right_content_container').width(300);_x000D_
}_x000D_
_x000D_
/* Begin test lines these can be deleted */_x000D_
$rightrightPosition = $('.right_content_container').css("right");_x000D_
$rightleftPosition = $('.right_content_container').css("left");_x000D_
$rightwidthPosition = $('.right_content_container').css("width");_x000D_
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);_x000D_
/* End test lines these can be deleted */_x000D_
_x000D_
}_x000D_
if( $thePageRefreshed == true ){_x000D_
$thePageRefreshed = false;_x000D_
}_x000D_
}/* NOTE: The html and body settings are needed for full functionality_x000D_
and they are ignored by jsfiddle so create this exapmle on your web site_x000D_
*/_x000D_
html {_x000D_
min-width: 310px;_x000D_
background: #333;_x000D_
min-height:100vh;_x000D_
}_x000D_
_x000D_
body{_x000D_
background: #333;_x000D_
background-color: #333;_x000D_
color: white;_x000D_
min-height:100vh;_x000D_
}_x000D_
_x000D_
.top_title{_x000D_
background-color: blue;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.bottom_content{_x000D_
border: 0px;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.left_right_container * {_x000D_
position: relative;_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
background: #333 !important;_x000D_
background-color: #333 !important;_x000D_
display:inline-block;_x000D_
text-shadow: none;_x000D_
text-transform: none;_x000D_
letter-spacing: normal;_x000D_
font-size: 14px;_x000D_
font-weight: 400;_x000D_
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;_x000D_
border-radius: 0;_x000D_
box-sizing: content-box;_x000D_
transition: none;_x000D_
}_x000D_
_x000D_
.left_navigator_item{_x000D_
display:inline-block;_x000D_
margin-right: 5px;_x000D_
margin-bottom: 0px !important;_x000D_
width: 100%;_x000D_
min-height: 20px !important;_x000D_
text-align:center !important;_x000D_
margin: 0px;_x000D_
padding-top: 3px;_x000D_
padding-bottom: 3px;_x000D_
vertical-align: top;_x000D_
}_x000D_
_x000D_
.left_navigator_items {_x000D_
float: left;_x000D_
width: 150px;_x000D_
}_x000D_
_x000D_
.right_content_container{_x000D_
float: right;_x000D_
overflow: visible!important;_x000D_
width:95%; /* width don't matter jqoery overwrites on refresh */_x000D_
display:none;_x000D_
right:0px;_x000D_
}_x000D_
_x000D_
.span_text{_x000D_
background: #eee !important;_x000D_
background-color: #eee !important;_x000D_
color: black !important;_x000D_
padding: 5px;_x000D_
margin: 0px;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
<div class="top_title">Test Title</div>_x000D_
<div class="bottom_content">_x000D_
<div class="left_right_container">_x000D_
<div class="left_navigator_items">_x000D_
<div class="left_navigator_item">Dashboard</div>_x000D_
<div class="left_navigator_item">Calendar</div>_x000D_
<div class="left_navigator_item">Calendar Validator</div>_x000D_
<div class="left_navigator_item">Bulletin Board Slide Editor</div>_x000D_
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>_x000D_
<div class="left_navigator_item">TV Guide</div>_x000D_
</div>_x000D_
<div class="right_content_container">_x000D_
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi._x000D_
_x000D_
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut._x000D_
_x000D_
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor._x000D_
_x000D_
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus._x000D_
_x000D_
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>Here is my fiddle that may just work for you as it did for me. https://jsfiddle.net/Larry_Robertson/62LLjapm/
Simplest solution is to just make the left div width equal 100% - the width of the right div plus any margin between them.
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
The problem that I found with Boushley's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of 'solutions' I found a tutorial (now link is dead) on creating three column pages.
The author offer's three different ways, one fixed width, one with three variable columns and one with fixed outer columns and a variable width middle. Much more elegant and effective than other examples I found. Significantly improved my understanding of CSS layout.
Basically, in the simple case above, float the first column left and give it a fixed width. Then give the column on the right a left-margin that is a little wider than the first column. That's it. Done. Ala Boushley's code:
Here's a demo in Stack Snippets & jsFiddle
#left {_x000D_
float: left;_x000D_
width: 180px;_x000D_
}_x000D_
_x000D_
#right {_x000D_
margin-left: 180px;_x000D_
}_x000D_
_x000D_
/* just to highlight divs for example*/_x000D_
#left { background-color: pink; }_x000D_
#right { background-color: lightgreen;}<div id="left"> left </div>_x000D_
<div id="right"> right </div>With Boushley's example the left column holds the other column to the right. As soon as the left column ends the right begins filling the whole space again. Here the right column simply aligns further into the page and the left column occupies it's big fat margin. No flow interactions needed.
I ran into this same problem trying to layout some jqueryUI controls. Although the common philosophy now is "use DIV instead of TABLE", I found in my case using TABLE worked much better. In particular, if you need to have straightforward alignment within the two elements (e.g., vertical centering, horizontal centering, etc.) the options available with TABLE give simple, intuitive controls for this.
Here's my solution:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
Source: Stackoverflow.com