How to make a div fill a remaining horizontal space?
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>html css css3 width responsive
edited Oct 10 '18 at 21:40
colxi
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
|
show 2 more comments
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>html css css3 width responsive
edited Oct 10 '18 at 21:40
colxi
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
11
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
1
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@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 '15 at 18:45
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14
|
show 2 more comments
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>html css css3 width responsive
edited Oct 10 '18 at 21:40
colxi
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
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> #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> #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>html css css3 width responsive
html css css3 width responsive
edited Oct 10 '18 at 21:40
colxi
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
edited Oct 10 '18 at 21:40
colxi
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
edited Oct 10 '18 at 21:40
colxi
2,2951726
edited Oct 10 '18 at 21:40
colxi
2,2951726
edited Oct 10 '18 at 21:40
colxi
2,2951726
2,2951726
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
asked Jun 23 '09 at 14:29
alexchencoalexchenco
21.2k58198359
21.2k58198359
11
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
1
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@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 '15 at 18:45
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14
|
show 2 more comments
11
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
1
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@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 '15 at 18:45
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14
11
11
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
1
1
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@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 '15 at 18:45
@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 '15 at 18:45
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14
|
show 2 more comments
25 Answers
25
active
oldest
votes
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>edited Aug 6 '17 at 8:33
Munawir
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
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 '11 at 0:11
4
+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 '12 at 8:20
12
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 '13 at 12:21
41
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.
– mystrdat
Jun 27 '14 at 15:14
|
show 11 more comments
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 this awesome tutorial 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.
edited May 3 '18 at 14:09
KyleMit
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
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 '14 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 '14 at 19:58
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
|
show 4 more comments
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.
edited Apr 8 '17 at 23:42
Chin
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
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.
– Nathan Loyer
Jul 12 '12 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.
– Mihai Frentiu
Oct 17 '13 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 '13 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.
– Mihai Frentiu
Oct 23 '13 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 '13 at 14:47
|
show 3 more comments
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.
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
@PatrickSzalapski Can you make a codepen or similar of the case? Overflowautomay trigger that depending on its contents. You can also use any other overflow value to get the same effect,hiddenmay work better for your case.
– mystrdat
Sep 20 '16 at 10:50
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
|
show 3 more comments
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/
edited Dec 26 '17 at 19:16
TylerH
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
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 '16 at 18:48
2
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
add a comment |
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;
}
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
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 '15 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 '15 at 20:31
add a comment |
@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.
edited Dec 26 '17 at 19:17
TylerH
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
1
overflow: hiddenindeed fixes this, thank you. (The marked answer is wrong BTW asrightactually takes all the available space on the parent, you can see this in all browsers when inspecting elements)
– huysentruitw
Nov 18 '12 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 '12 at 19:36
2
@tomswift Settingoverflow: hiddenputs 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/…
– John Kurlak
Feb 19 '15 at 21:48
Theoverflow:xxxattribute is the key. As you say, it stops#rightfrom expanding underneath#left. It very neatly solves a problem I was having using jQuery UI resizable - with#rightset with an overflow attribute and#leftset as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
– kbro
Dec 6 '15 at 5:29
add a comment |
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/
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
add a comment |
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.
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
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 '15 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 withoverflow: hidden. jsfiddle.net/dave2/a5jbpc85
– Dave
Dec 2 '17 at 18:26
add a comment |
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>
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
add a comment |
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.
edited May 23 '17 at 11:47
Community♦
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
add a comment |
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;
}
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
add a comment |
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>
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
add a comment |
/*
* 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>
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
add a comment |
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/
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
add a comment |
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/
answered Aug 5 '15 at 19:38
TidanTidan
2918
add a comment |
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;
}
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
add a comment |
.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>
</divTry this. It worked for me.
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
add a comment |
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
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
add a comment |
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>answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
add a comment |
html table element makes this by default... You define table width then the columns will always span entire table width. The rest is about imagination
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
add a comment |
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;
...
}
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
add a comment |
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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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/
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
add a comment |
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>
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 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.
– Vilinkameni
May 7 '14 at 11:46
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 honouroverflow.
– kbro
Dec 6 '15 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 likedisplay:tableto 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 '17 at 17:39
add a comment |
new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f1032914%2fhow-to-make-a-div-fill-a-remaining-horizontal-space%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
25 Answers
25
active
oldest
votes
25 Answers
25
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>edited Aug 6 '17 at 8:33
Munawir
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
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 '11 at 0:11
4
+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 '12 at 8:20
12
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 '13 at 12:21
41
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.
– mystrdat
Jun 27 '14 at 15:14
|
show 11 more comments
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>edited Aug 6 '17 at 8:33
Munawir
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
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 '11 at 0:11
4
+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 '12 at 8:20
12
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 '13 at 12:21
41
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.
– mystrdat
Jun 27 '14 at 15:14
|
show 11 more comments
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>edited Aug 6 '17 at 8:33
Munawir
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
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>#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>#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>edited Aug 6 '17 at 8:33
Munawir
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
edited Aug 6 '17 at 8:33
Munawir
2,82582239
edited Aug 6 '17 at 8:33
Munawir
2,82582239
edited Aug 6 '17 at 8:33
Munawir
2,82582239
2,82582239
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
answered Jun 23 '09 at 14:35
BoushleyBoushley
3,39542228
3,39542228
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
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 '11 at 0:11
4
+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 '12 at 8:20
12
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 '13 at 12:21
41
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.
– mystrdat
Jun 27 '14 at 15:14
|
show 11 more comments
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
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 '11 at 0:11
4
+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 '12 at 8:20
12
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 '13 at 12:21
41
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.
– mystrdat
Jun 27 '14 at 15:14
8
8
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
You have to remove the width: 100% on the right div though to make it work.
– Johan Leino
Jun 23 '09 at 14:39
234
234
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 '11 at 0:11
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 '11 at 0:11
4
4
+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 '12 at 8:20
+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 '12 at 8:20
12
12
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 '13 at 12:21
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 '13 at 12:21
41
41
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.
– mystrdat
Jun 27 '14 at 15:14
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.
– mystrdat
Jun 27 '14 at 15:14
|
show 11 more comments
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 this awesome tutorial 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.
edited May 3 '18 at 14:09
KyleMit
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
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 '14 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 '14 at 19:58
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
|
show 4 more comments
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 this awesome tutorial 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.
edited May 3 '18 at 14:09
KyleMit
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
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 '14 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 '14 at 19:58
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
|
show 4 more comments
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 this awesome tutorial 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.
edited May 3 '18 at 14:09
KyleMit
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
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 this awesome tutorial 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.
#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>#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>edited May 3 '18 at 14:09
KyleMit
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
edited May 3 '18 at 14:09
KyleMit
59k36245407
edited May 3 '18 at 14:09
KyleMit
59k36245407
edited May 3 '18 at 14:09
KyleMit
59k36245407
59k36245407
answered May 10 '11 at 19:20
HankHank
2,8242916
answered May 10 '11 at 19:20
HankHank
2,8242916
answered May 10 '11 at 19:20
HankHank
2,8242916
2,8242916
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
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 '14 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 '14 at 19:58
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
|
show 4 more comments
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
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 '14 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 '14 at 19:58
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
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?
– Fahad Uddin
Jul 10 '11 at 1:33
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?
– Fahad Uddin
Jul 10 '11 at 1:33
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
should be:margin-left: 190px; you forgot ';'. Also margin-left should be 180px.
– Fahad Uddin
Jul 10 '11 at 1:34
3
3
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 '14 at 21:56
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 '14 at 21:56
2
2
@RoniTovi , the floating element(s) should come before the not floating ones in your html. jsfiddle.net/CSbbM/127
– Hank
Sep 4 '14 at 19:58
@RoniTovi , the floating element(s) should come before the not floating ones in your html. jsfiddle.net/CSbbM/127
– Hank
Sep 4 '14 at 19:58
6
6
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
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?
– Patrick Szalapski
Sep 16 '16 at 20:02
|
show 4 more comments
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.
edited Apr 8 '17 at 23:42
Chin
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
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.
– Nathan Loyer
Jul 12 '12 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.
– Mihai Frentiu
Oct 17 '13 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 '13 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.
– Mihai Frentiu
Oct 23 '13 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 '13 at 14:47
|
show 3 more comments
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.
edited Apr 8 '17 at 23:42
Chin
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
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.
– Nathan Loyer
Jul 12 '12 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.
– Mihai Frentiu
Oct 17 '13 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 '13 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.
– Mihai Frentiu
Oct 23 '13 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 '13 at 14:47
|
show 3 more comments
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.
edited Apr 8 '17 at 23:42
Chin
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
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.
edited Apr 8 '17 at 23:42
Chin
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
edited Apr 8 '17 at 23:42
Chin
7,0992371129
edited Apr 8 '17 at 23:42
Chin
7,0992371129
edited Apr 8 '17 at 23:42
Chin
7,0992371129
7,0992371129
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
answered Mar 24 '11 at 9:13
Mihai FrentiuMihai Frentiu
1,402199
1,402199
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.
– Nathan Loyer
Jul 12 '12 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.
– Mihai Frentiu
Oct 17 '13 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 '13 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.
– Mihai Frentiu
Oct 23 '13 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 '13 at 14:47
|
show 3 more comments
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.
– Nathan Loyer
Jul 12 '12 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.
– Mihai Frentiu
Oct 17 '13 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 '13 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.
– Mihai Frentiu
Oct 23 '13 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 '13 at 14:47
3
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.
– Nathan Loyer
Jul 12 '12 at 19:04
Doesn't work when the content inside the div with width:auto is larger than the rest of the space available in the viewport.
– Nathan Loyer
Jul 12 '12 at 19:04
4
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.
– Mihai Frentiu
Oct 17 '13 at 13:18
@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.
– Mihai Frentiu
Oct 17 '13 at 13:18
1
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 '13 at 13:45
@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 '13 at 13:45
2
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.
– Mihai Frentiu
Oct 23 '13 at 10:11
@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.
– Mihai Frentiu
Oct 23 '13 at 10:11
1
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 '13 at 14:47
@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 '13 at 14:47
|
show 3 more comments
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.
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
@PatrickSzalapski Can you make a codepen or similar of the case? Overflowautomay trigger that depending on its contents. You can also use any other overflow value to get the same effect,hiddenmay work better for your case.
– mystrdat
Sep 20 '16 at 10:50
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
|
show 3 more comments
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.
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
@PatrickSzalapski Can you make a codepen or similar of the case? Overflowautomay trigger that depending on its contents. You can also use any other overflow value to get the same effect,hiddenmay work better for your case.
– mystrdat
Sep 20 '16 at 10:50
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
|
show 3 more comments
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.
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
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.
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
edited Jul 31 '14 at 20:30
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
answered Jun 27 '14 at 15:21
mystrdatmystrdat
2,7172232
2,7172232
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
@PatrickSzalapski Can you make a codepen or similar of the case? Overflowautomay trigger that depending on its contents. You can also use any other overflow value to get the same effect,hiddenmay work better for your case.
– mystrdat
Sep 20 '16 at 10:50
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
|
show 3 more comments
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
@PatrickSzalapski Can you make a codepen or similar of the case? Overflowautomay trigger that depending on its contents. You can also use any other overflow value to get the same effect,hiddenmay work better for your case.
– mystrdat
Sep 20 '16 at 10:50
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
1
1
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
Browser support for overflow. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
– Yevgeniy Afanasyev
Aug 28 '15 at 6:30
1
1
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
Sometimes I end up with a useless horizontal scrollbar on the .right element. What is the problem there?
– Patrick Szalapski
Sep 16 '16 at 20:29
1
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.– mystrdat
Sep 20 '16 at 10:50
@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.– mystrdat
Sep 20 '16 at 10:50
1
1
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
What does BFC stand for, and is there a good general tutorial explaining BFC on the web?
– lulalala
Dec 28 '16 at 6:53
1
1
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
@lulalala it stands for block formatting context. Here's a more thorough explanation
– bobo
Jan 3 '17 at 2:54
|
show 3 more comments
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/
edited Dec 26 '17 at 19:16
TylerH
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
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 '16 at 18:48
2
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
add a comment |
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/
edited Dec 26 '17 at 19:16
TylerH
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
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 '16 at 18:48
2
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
add a comment |
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/
edited Dec 26 '17 at 19:16
TylerH
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
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/
edited Dec 26 '17 at 19:16
TylerH
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
edited Dec 26 '17 at 19:16
TylerH
16k105469
edited Dec 26 '17 at 19:16
TylerH
16k105469
edited Dec 26 '17 at 19:16
TylerH
16k105469
16k105469
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
answered Aug 4 '14 at 11:31
JordanJordan
1,63211423
1,63211423
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 '16 at 18:48
2
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
add a comment |
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 '16 at 18:48
2
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
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 '16 at 18:48
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 '16 at 18:48
2
2
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 '18 at 4:11
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 '18 at 4:11
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
This should be accepted as the selected solution for current times. Also, it is the only "non-hackish" solution.
– Greg
Nov 20 '18 at 19:31
add a comment |
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;
}
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
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 '15 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 '15 at 20:31
add a comment |
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;
}
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
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 '15 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 '15 at 20:31
add a comment |
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;
}
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
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;
}
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
edited Dec 10 '15 at 9:26
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
answered Sep 28 '15 at 14:38
Marcos B.Marcos B.
390514
390514
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 '15 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 '15 at 20:31
add a comment |
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 '15 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 '15 at 20:31
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 '15 at 19:25
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 '15 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 '15 at 20:31
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 '15 at 20:31
add a comment |
@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.
edited Dec 26 '17 at 19:17
TylerH
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
1
overflow: hiddenindeed fixes this, thank you. (The marked answer is wrong BTW asrightactually takes all the available space on the parent, you can see this in all browsers when inspecting elements)
– huysentruitw
Nov 18 '12 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 '12 at 19:36
2
@tomswift Settingoverflow: hiddenputs 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/…
– John Kurlak
Feb 19 '15 at 21:48
Theoverflow:xxxattribute is the key. As you say, it stops#rightfrom expanding underneath#left. It very neatly solves a problem I was having using jQuery UI resizable - with#rightset with an overflow attribute and#leftset as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
– kbro
Dec 6 '15 at 5:29
add a comment |
@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.
edited Dec 26 '17 at 19:17
TylerH
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
1
overflow: hiddenindeed fixes this, thank you. (The marked answer is wrong BTW asrightactually takes all the available space on the parent, you can see this in all browsers when inspecting elements)
– huysentruitw
Nov 18 '12 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 '12 at 19:36
2
@tomswift Settingoverflow: hiddenputs 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/…
– John Kurlak
Feb 19 '15 at 21:48
Theoverflow:xxxattribute is the key. As you say, it stops#rightfrom expanding underneath#left. It very neatly solves a problem I was having using jQuery UI resizable - with#rightset with an overflow attribute and#leftset as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
– kbro
Dec 6 '15 at 5:29
add a comment |
@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.
edited Dec 26 '17 at 19:17
TylerH
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
@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.
edited Dec 26 '17 at 19:17
TylerH
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
edited Dec 26 '17 at 19:17
TylerH
16k105469
edited Dec 26 '17 at 19:17
TylerH
16k105469
edited Dec 26 '17 at 19:17
TylerH
16k105469
16k105469
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
answered Apr 18 '12 at 23:24
DenzelDenzel
85676
85676
1
overflow: hiddenindeed fixes this, thank you. (The marked answer is wrong BTW asrightactually takes all the available space on the parent, you can see this in all browsers when inspecting elements)
– huysentruitw
Nov 18 '12 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 '12 at 19:36
2
@tomswift Settingoverflow: hiddenputs 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/…
– John Kurlak
Feb 19 '15 at 21:48
Theoverflow:xxxattribute is the key. As you say, it stops#rightfrom expanding underneath#left. It very neatly solves a problem I was having using jQuery UI resizable - with#rightset with an overflow attribute and#leftset as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
– kbro
Dec 6 '15 at 5:29
add a comment |
1
overflow: hiddenindeed fixes this, thank you. (The marked answer is wrong BTW asrightactually takes all the available space on the parent, you can see this in all browsers when inspecting elements)
– huysentruitw
Nov 18 '12 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 '12 at 19:36
2
@tomswift Settingoverflow: hiddenputs 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/…
– John Kurlak
Feb 19 '15 at 21:48
Theoverflow:xxxattribute is the key. As you say, it stops#rightfrom expanding underneath#left. It very neatly solves a problem I was having using jQuery UI resizable - with#rightset with an overflow attribute and#leftset as resizable, you have a simple movable boundary. See jsfiddle.net/kmbro/khr77h0t.
– kbro
Dec 6 '15 at 5:29
1
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)– huysentruitw
Nov 18 '12 at 10:36
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)– huysentruitw
Nov 18 '12 at 10:36
1
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 '12 at 19:36
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 '12 at 19:36
2
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/…– John Kurlak
Feb 19 '15 at 21:48
@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/…– John Kurlak
Feb 19 '15 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 '15 at 5:29
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 '15 at 5:29
add a comment |
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/
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
add a comment |
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/
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
add a comment |
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/
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
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/
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
edited Aug 12 '16 at 22:32
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
answered Oct 4 '15 at 15:05
Dariusz SikorskiDariusz Sikorski
2,3261635
2,3261635
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
add a comment |
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
Perfect solution for flexible nav bar with fixed logo.
– Trunk
Jun 8 '18 at 16:02
add a comment |
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.
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
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 '15 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 withoverflow: hidden. jsfiddle.net/dave2/a5jbpc85
– Dave
Dec 2 '17 at 18:26
add a comment |
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.
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
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 '15 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 withoverflow: hidden. jsfiddle.net/dave2/a5jbpc85
– Dave
Dec 2 '17 at 18:26
add a comment |
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.
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
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.
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
edited Aug 30 '11 at 21:24
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
answered Aug 30 '11 at 21:06
chinchi11achinchi11a
4713
4713
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 '15 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 withoverflow: hidden. jsfiddle.net/dave2/a5jbpc85
– Dave
Dec 2 '17 at 18:26
add a comment |
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 '15 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 withoverflow: hidden. jsfiddle.net/dave2/a5jbpc85
– Dave
Dec 2 '17 at 18:26
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 '15 at 5:23
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 '15 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 '17 at 18:26
@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 '17 at 18:26
add a comment |
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>
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
add a comment |
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>
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
add a comment |
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>
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
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>
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
edited Nov 23 '12 at 14:56
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
answered Nov 23 '12 at 14:49
DominicDominic
28.6k106993
28.6k106993
add a comment |
add a comment |
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.
edited May 23 '17 at 11:47
Community♦
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
add a comment |
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.
edited May 23 '17 at 11:47
Community♦
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
add a comment |
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.
edited May 23 '17 at 11:47
Community♦
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
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.
edited May 23 '17 at 11:47
Community♦
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
11
answered Nov 7 '14 at 15:20
alex351alex351
509416
answered Nov 7 '14 at 15:20
alex351alex351
509416
answered Nov 7 '14 at 15:20
alex351alex351
509416
509416
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
add a comment |
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
Not available on some older browsers like IE8 and only partially on IE9 (caniuse.com/#feat=calc)
– landi
Jan 21 '15 at 11:18
add a comment |
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;
}
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
add a comment |
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;
}
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
add a comment |
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;
}
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
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;
}
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
answered Nov 17 '16 at 16:32
HelzgateHelzgate
5,11812332
5,11812332
add a comment |
add a comment |
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>
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
add a comment |
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>
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
add a comment |
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>
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
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>
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
answered Dec 21 '16 at 13:45
Ildar ZaripovIldar Zaripov
635
635
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
add a comment |
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
This answer duplicates Jordan's answer from 2014.
– TylerH
Dec 26 '17 at 19:17
add a comment |
/*
* 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>
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
add a comment |
/*
* 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>
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
add a comment |
/*
* 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>
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
/*
* 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>
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
edited Nov 8 '13 at 14:11
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
answered Nov 8 '13 at 13:55
user1700099user1700099
39846
39846
add a comment |
add a comment |
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/
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
add a comment |
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/
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
add a comment |
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/
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
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/
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
edited Jun 29 '15 at 3:45
Julian Paolo Dayag
1,89131025
1,89131025
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
answered May 22 '15 at 4:46
iamatsundere181iamatsundere181
5471728
5471728
add a comment |
add a comment |
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/
answered Aug 5 '15 at 19:38
TidanTidan
2918
add a comment |
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/
answered Aug 5 '15 at 19:38
TidanTidan
2918
add a comment |
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/
answered Aug 5 '15 at 19:38
TidanTidan
2918
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/
answered Aug 5 '15 at 19:38
TidanTidan
2918
edited Aug 7 '15 at 14:28
answered Aug 5 '15 at 19:38
TidanTidan
2918
answered Aug 5 '15 at 19:38
TidanTidan
2918
answered Aug 5 '15 at 19:38
TidanTidan
2918
2918
add a comment |
add a comment |
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;
}
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
add a comment |
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;
}
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
add a comment |
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;
}
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
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;
}
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
edited Oct 4 '15 at 12:51
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
answered Oct 4 '15 at 12:31
KeepMoveKeepMove
2,22512537
2,22512537
add a comment |
add a comment |
.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>
</divTry this. It worked for me.
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
add a comment |
.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>
</divTry this. It worked for me.
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
add a comment |
.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>
</divTry this. It worked for me.
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
.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>
</divTry this. It worked for me.
.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.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>
</divanswered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
answered Oct 9 '15 at 14:27
SpoorthiSpoorthi
192
192
add a comment |
add a comment |
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
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
add a comment |
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
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
add a comment |
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
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
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
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
answered Feb 16 '16 at 8:13
BuksyBuksy
5,35454158
5,35454158
add a comment |
add a comment |
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>answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
add a comment |
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>answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
add a comment |
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>answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
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>#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>#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>answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
answered Oct 10 '18 at 21:33
colxicolxi
2,2951726
2,2951726
add a comment |
add a comment |
html table element makes this by default... You define table width then the columns will always span entire table width. The rest is about imagination
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
add a comment |
html table element makes this by default... You define table width then the columns will always span entire table width. The rest is about imagination
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
add a comment |
html table element makes this by default... You define table width then the columns will always span entire table width. The rest is about imagination
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
html table element makes this by default... You define table width then the columns will always span entire table width. The rest is about imagination
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
answered Feb 4 at 10:25
Botea FlorinBotea Florin
201311
201311
add a comment |
add a comment |
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;
...
}
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
add a comment |
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;
...
}
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
add a comment |
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;
...
}
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
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;
...
}
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
answered Feb 24 at 1:49
Dmytro YurchenkoDmytro Yurchenko
312
312
add a comment |
add a comment |
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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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/
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
add a comment |
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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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/
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
add a comment |
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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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/
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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/
// 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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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>// 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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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>answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
edited Jan 10 '18 at 14:35
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
answered Jan 10 '18 at 3:44
Larry RobertsonLarry Robertson
877
877
add a comment |
add a comment |
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>
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 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.
– Vilinkameni
May 7 '14 at 11:46
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 honouroverflow.
– kbro
Dec 6 '15 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 likedisplay:tableto 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 '17 at 17:39
add a comment |
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>
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 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.
– Vilinkameni
May 7 '14 at 11:46
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 honouroverflow.
– kbro
Dec 6 '15 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 likedisplay:tableto 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 '17 at 17:39
add a comment |
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>
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
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>
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
answered Apr 4 '12 at 22:21
J. PetersonJ. Peterson
1,31411518
1,31411518
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 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.
– Vilinkameni
May 7 '14 at 11:46
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 honouroverflow.
– kbro
Dec 6 '15 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 likedisplay:tableto 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 '17 at 17:39
add a comment |
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 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.
– Vilinkameni
May 7 '14 at 11:46
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 honouroverflow.
– kbro
Dec 6 '15 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 likedisplay:tableto 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 '17 at 17:39
8
8
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 at 13:35
You should never, ever, ever use tables for formatting anything but tabular data. EVER.
– mmmeff
Mar 21 '13 at 13:35
1
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.– Vilinkameni
May 7 '14 at 11:46
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.– Vilinkameni
May 7 '14 at 11:46
4
4
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 at 17:46
Don't know why everyone freaks out about tables. Sometimes they are useful.
– Jandieg
Jul 7 '15 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 '15 at 5:34
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 '15 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 '17 at 17:39
@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 '17 at 17:39
add a comment |
new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
add a comment |
new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
add a comment |
new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
new to css. But I solved this problem by using inline-block. check this out: http://learnlayout.com/inline-block.html
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
answered Jun 17 '15 at 14:51
BoboBobo
3,341164979
3,341164979
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f1032914%2fhow-to-make-a-div-fill-a-remaining-horizontal-space%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
11
Remove the width and float property on the #navigation and it will work.
– Johan Leino
Jun 23 '09 at 14:40
related stackoverflow.com/questions/4873832/…
– Adrien Be
Feb 10 '14 at 10:33
1
@alexchenco: you might want to update your chosen answer to the one provided by Hank
– Adrien Be
Feb 10 '14 at 10:34
@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 '15 at 18:45
@edwardtyl fair enough. Actually, it seems to use a similar technic as the answer I provided for stackoverflow.com/questions/4873832/…
– Adrien Be
Jul 22 '15 at 1:14