515

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 {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>

6
  • 12
    Remove the width and float property on the #navigation and it will work. Jun 23, 2009 at 14:40
  • related stackoverflow.com/questions/4873832/…
    – Adriano
    Feb 10, 2014 at 10:33
  • @AdrienBe actually if you look at mystrdat's answer I think that one is even better. It's only one line of css and it's the only one that worked for me (I'm making three columns with float:left; on the first two with fixed widths and overflow:auto on the last one and it works great)
    – edwardtyl
    Jul 21, 2015 at 18:45
  • @edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
    – Adriano
    Jul 22, 2015 at 1:14
  • Check out my answer a few lines below. The answer is to combine float: left and overflow hidden. This will give you true "fill remaining space" behaviour for the right column. Aug 12, 2016 at 22:36

26 Answers 26

296

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 {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<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.

11
  • When you close the div tag, the content after that div should be displayed in a new line but that is not happening. Can you please explain why?
    – user379888
    Jul 10, 2011 at 1:33
  • should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
    – user379888
    Jul 10, 2011 at 1:34
  • 4
    Note: if you want the fixed-width element on the right, be sure to place it first in the code or it will be pushed to the next line anyway.
    – Trevor
    Apr 1, 2014 at 21:56
  • 2
    @RoniTovi , the floating element(s) should come before the not floating ones in your html. jsfiddle.net/CSbbM/127
    – Hank
    Sep 4, 2014 at 19:58
  • 9
    So, how do you do this if you want to avoid a fixed width? In other words, allow the left column to be only as wide as it needs to be, and the right column to take up the rest? Sep 16, 2016 at 20:02
256

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/

7
  • See www.w3schools.com/cssref/css3_pr_flex-grow.asp for a good explanation of the CSS attribute. A simple modern solution but might not work in old browsers.
    – Edward
    Jun 30, 2016 at 18:48
  • 4
    Flexbox FTW ... I've tried all the other solutions in this thread, nothing works, i try this flexbox solution, it works right away ... classical CSS (i.e. before the advent of flexbox and css grid) totally sucks at layout ... flex and grid rule :-)
    – leo
    Jul 13, 2018 at 4:11
  • 5
    This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
    – Greg
    Nov 20, 2018 at 19:31
  • 1
    flex-grow for the win! Feb 10, 2021 at 1:56
  • this solution works even if you have the expandable div in between other flex-arranged divs. :thumbsup:
    – nologin
    May 2, 2021 at 11:43
140

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.

8
  • 3
    Doesn't work when the content inside the div with width:auto is larger than the rest of the space available in the viewport. Jul 12, 2012 at 19:04
  • 4
    @einord, this solution does not use tables, and I'm aware that tables should be used only for tabular data. So, is out of context here. Actual tables and display:table(+other variation) properties are completely different things. Oct 17, 2013 at 13:18
  • 1
    @Mihai Frentiu, in which ways does display:table differ from the actual table element? I would really like to learn this if they are completely different things, thank you. =)
    – einord
    Oct 18, 2013 at 13:45
  • 2
    @einord, using HTML tables implies the definition of the whole table structure in HTML code. The CSS table model allows you to make almost any element behave like a table element without defining the whole table tree. Oct 23, 2013 at 10:11
  • 1
    @Mihai Frentiu, thanks for the answer. But isn't the behavior of the table element half of the problem with using tables as design elements?
    – einord
    Oct 23, 2013 at 14:47
118

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.

10
  • 2
    Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp Aug 28, 2015 at 6:30
  • 1
    Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there? Sep 16, 2016 at 20:29
  • 1
    @PatrickSzalapski Can you make a codepen or similar of the case? Overflow auto may trigger that depending on its contents. You can also use any other overflow value to get the same effect, hidden may work better for your case.
    – zrooda
    Sep 20, 2016 at 10:50
  • 1
    What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
    – lulalala
    Dec 28, 2016 at 6:53
  • 1
    @lulalala it stands for block formatting context. Here's a more thorough explanation
    – bobo
    Jan 3, 2017 at 2:54
81

This seems to accomplish what you're going for.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

12
  • 9
    You have to remove the width: 100% on the right div though to make it work. Jun 23, 2009 at 14:39
  • 267
    This solution actually has a problem. Try removing the color from the LEFT element. You'll notice the color from RIGHT element is actually hiding under it. The content seems to go to the right place, but the RIGHT div itself isn't.
    – Vyrotek
    Apr 13, 2011 at 0:11
  • 5
    +1 Solved my problem too. What I learned was that I needed to remove "float: left" on the filling div. I thought that would make the page implode
    – keyser
    Aug 1, 2012 at 8:20
  • 13
    Perhaps good to notice that Vyroteks remark is true, but can be solved with overflow:hidden on the right column. Denzel mentions this, but his is not the accepted answer, so you could miss that...
    – Ruudt
    Apr 23, 2013 at 12:21
  • 55
    This is plainly wrong, the right element has full size, just it's contents are floated around the left element. This is not a solution, just more confusion.
    – zrooda
    Jun 27, 2014 at 15:14
28

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;
}
2
  • 1
    IE 9 and up support calc attribute. The only problem with this solution is maybe we do not know the width of the left column or it changes.
    – Arashsoft
    Nov 10, 2015 at 19:25
  • well, this solution is maybe oriented to a flexible case and assuming that you don't know or you don't care the width of the parent container. In the question @alexchenco said that he wanted to fill "the remaining space" so... I think is valid :) and yes, IE 9 is also supported, thanks for the note ;)
    – Marcos B.
    Nov 10, 2015 at 20:31
18

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

http://jsfiddle.net/79hpS/

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.

4
  • 1
    overflow: hidden indeed fixes this, thank you. (The marked answer is wrong BTW as right actually takes all the available space on the parent, you can see this in all browsers when inspecting elements) Nov 18, 2012 at 10:36
  • 1
    Can anyone explain why this works exactly? I know I've seen a good explanation somewhere here but I can't seem to find it.
    – tomswift
    Dec 29, 2012 at 19:36
  • 2
    @tomswift Setting overflow: hidden puts the right column in its own block formatting context. Block elements take up all horizontal space available to them. See: developer.mozilla.org/en-US/docs/Web/Guide/CSS/… Feb 19, 2015 at 21:48
  • The overflow:xxx attribute is the key. As you say, it stops #right from expanding underneath #left. It very neatly solves a problem I was having using jQuery UI resizable - with #right set with an overflow attribute and #left set as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
    – kbro
    Dec 6, 2015 at 5:29
14

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/

1
  • 1
    Perfect solution for flexible nav bar with fixed logo.
    – Trunk
    Jun 8, 2018 at 16:02
6

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

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>
1
  • 1
    This answer duplicates Jordan's answer from 2014.
    – TylerH
    Dec 26, 2017 at 19:17
3

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.

2
  • 1
    Don't use tables for layout. You cannot set their height. They expand to hold their content, and they do not honour overflow.
    – kbro
    Dec 6, 2015 at 5:23
  • @kbro: Don't use tables for layout because content and display should be kept separate. But if content is structured as a table, it can certainly be clipped with overflow: hidden. jsfiddle.net/dave2/a5jbpc85
    – Dave
    Dec 2, 2017 at 18:26
3

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

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.

1
3

You can use the Grid CSS properties, is the most clear, clean and intuitive way structure your boxes.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

3

If anyone needs the same solution but without the fixed length of left div:

If you want the left side div to take all the space it needs you can remove the fixed size 180px. See CSS below:

#left {
  float: left;
  background-color: red;
}

#right {
  background-color: yellow;
  flex-grow: 1
}

See here in JSFiddle: jsfiddle-div-space

1

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

Jsfiddle example

0

/* * 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>
0

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

Link: http://jsfiddle.net/MHeqG/

0

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:

https://jsfiddle.net/tidan/332a6qte/

0

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

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Try this. It worked for me.

0

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
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <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.

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.

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.

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.

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>
        </div>
    </div>
</div>

Here is my fiddle that may just work for you as it did for me. https://jsfiddle.net/Larry_Robertson/62LLjapm/

0

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;
...

}

0

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

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

https://codepen.io/tamjk/pen/dybqKBN

-2

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>
5
  • 9
    You should never, ever, ever use tables for formatting anything but tabular data. EVER.
    – mmmeff
    Mar 21, 2013 at 13:35
  • 1
    The problem with tables is that the markup will be misleading if what you are trying to display is not meant to be tabular data. If you choose to neglect the principle of markup carrying meaning, you could as well get back to <font>, <b>, etc. HTML evolved past that to focus less on the presentation. May 7, 2014 at 11:46
  • 4
    Don't know why everyone freaks out about tables. Sometimes they are useful.
    – Jandieg
    Jul 7, 2015 at 17:46
  • You can't fix the height of a table. If the content gets bigger then so does the table. And it doesn't honour overflow.
    – kbro
    Dec 6, 2015 at 5:34
  • @Jandieg: see Mihai Frentiu's answer for an explanation. The whole purpose of CSS is to separate content from appearance. Using properties like display:table to achieve the desired appearance of non-tabular data is clean. Forcing non-tabular data like page columns or form controls into HTML tables to control layout is unclean.
    – Dave
    Dec 2, 2017 at 17:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.