Related
I have a problem aligning my div's side by side...
Here is an image how it should look:
This is the code for the main structure:
<div id="AttackDiv">
<div id="ImageDiv">
</div>
<div id="ContentDiv">
</div>
<div id="SkillDiv">
</div>
</div>
The "ImageDiv" is where the picutre is located. It takes up 120px.
The "ContentDiv" is where the text is inside and the "SkillDiv" is where the 3 other black boxes are inside.
This is my CSS:
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
Shows up this:
The problem is when I am trying to add those black boxes which you can see above in the image. Here is how it looks:
If I remove the white background color, you can see that somehow the Div's aren't aligning properly. They are kinda like running in each other.
Divs are block elements by default and, in the normal flow, they occupy 100% width of their container. So, naturally, div elements will stack vertically forming a column.
To make them align side-by-side consider these options:
apply float: left to all divs you want to display in a row
define the divs as display: inline-block
OR, for a very simple and efficient solution, just use flexbox:
Aligning Three Divs Horizontally Using Flexbox
Also, when working with floats, it helps to be familiar with clearfix methods:
What is a clearfix?
What methods of ‘clearfix’ can I use?
Clearing Floats: An Overview of Different clearfix Methods
Put the stuff on the right side into its own div container and then float it to the right.
If I understood you right, this should be it:
HTML
<div id="AttackDiv">
<div id="ImageDiv">left
</div>
<div id="RightSide">
<div id="ContentDiv">right1
</div>
<div id="SkillDiv">right2
</div>
</div>
</div>
CSS
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
#RightSide {
float: right;
width: 200px;
}
You can look at it here: https://jsfiddle.net/mxcqyjos/4/
I want a two-column div layout, where each one can have variable width e.g.
div {
float: left;
}
.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space.
Currently, my 'view' div is resized to content it contains
It will also be good if both divs take up the whole height.
Not duplicate disclaimer:
Expand div to max width when float:left is set
because there the left one has a fixed width.
Help with div - make div fit the remaining width
because I need two columns both aligned to left
The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.
Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.
This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.
Demos:
Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/
div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>
I just discovered the magic of flex boxes (display: flex). Try this:
<style>
#box {
display: flex;
}
#b {
flex-grow: 100;
border: 1px solid green;
}
</style>
<div id='box'>
<div id='a'>Tree</div>
<div id='b'>View</div>
</div>
Flex boxes give me the control I've wished css had for 15 years. Its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the CSS Flexbox flex-grow property to fill the remaining space.
html, body {
height: 100%;
}
body {
display: flex;
}
.second {
flex-grow: 1;
}
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>
This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.
If both the columns were fixed width, this would be easy.
If one of the columns was fixed width, this would be slightly harder but entirely doable.
With both columns variable width, IMHO you need to just use a two-column table.
Use calc:
.leftSide {
float: left;
width: 50px;
background-color: green;
}
.rightSide {
float: left;
width: calc(100% - 50px);
background-color: red;
}
<div style="width:200px">
<div class="leftSide">a</div>
<div class="rightSide">b</div>
</div>
The problem with this is that all widths must be explicitly defined, either as a value(px and em work fine), or as a percent of something explicitly defined itself.
Check this solution out
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.content {
background-color: red;
height: 200px;
width: auto;
margin-left: 200px;
}
.item {
width: 25%;
background-color: blue;
float: left;
color: white;
}
.clearfix {
clear: both;
}
<div class="container">
<div class="clearfix"></div>
<div class="sidebar">width: 200px</div>
<div class="content">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
</div>
</div>
Here, this might help...
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="clear" />
</div>
</body>
</html>
If the width of the other column is fixed, how about using the calc CSS function working for all common browsers:
width: calc(100% - 20px) /* 20px being the first column's width */
This way the width of the second row will be calculated (i.e. remaining width) and applied responsively.
I don't understand why people are willing to work so hard to find a pure-CSS solution for simple columnar layouts that are SO EASY using the old TABLE tag.
All Browsers still have the table layout logic... Call me a dinosaur perhaps, but I say let it help you.
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
<tr>
<td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
<td bgcolor="#F0F0F0">View</td>
</tr>
</table>
Much less risky in terms of cross-browser compatibility too.
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="right">View</div>
<div style="width: <=100% getTreeWidth()100 %>">Tree</div>
<div class="clear" />
</div>
<div class="ColumnWrapper">
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
</div>
</body>
</html>
You can try CSS Grid Layout.
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column: 1;
}
dd {
grid-column: 2;
margin: 0;
background-color: #ccc;
}
<dl>
<dt>lorem ipsum</dt>
<dd>dolor sit amet</dd>
<dt>carpe</dt>
<dd>diem</dd>
</dl>
flex-grow - This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). See more here
.parent {
display: flex;
}
.child {
flex-grow: 1; // It accepts a unitless value that serves as a proportion
}
.left {
background: red;
}
.right {
background: green;
}
<div class="parent">
<div class="child left">
Left 50%
</div>
<div class="child right">
Right 50%
</div>
</div>
A slightly different implementation,
Two div panels(content+extra), side by side, content panel expands if extra panel is not present.
jsfiddle: http://jsfiddle.net/qLTMf/1722/
You can use W3's CSS library that contains a class called rest that does just that:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-row">
<div class="w3-col " style="width:150px">
<p>150px</p>
</div>
<div class="w3-rest w3-green">
<p>w3-rest</p>
</div>
</div>
Don't forget to link the CSS library in the page's header:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Here's the official demo: W3 School Tryit Editor
Im not sure if this is the answer you are expecting but, why don't you set the width of Tree to 'auto' and width of 'View' to 100% ?
I wrote a javascript function that I call from jQuery $(document).ready(). This will parse all children of the parent div and only update the right most child.
html
...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....
javascript
$(document).ready(function(){
stretchDivs();
});
function stretchDivs() {
// loop thru each <div> that has class='stretch'
$("div.stretch").each(function(){
// get the inner width of this <div> that has class='stretch'
var totalW = parseInt($(this).css("width"));
// loop thru each child node
$(this).children().each(function(){
// subtract the margins, borders and padding
totalW -= (parseInt($(this).css("margin-left"))
+ parseInt($(this).css("border-left-width"))
+ parseInt($(this).css("padding-left"))
+ parseInt($(this).css("margin-right"))
+ parseInt($(this).css("border-right-width"))
+ parseInt($(this).css("padding-right")));
// if this is the last child, we can set its width
if ($(this).is(":last-child")) {
$(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
} else {
// this is not the last child, so subtract its width too
totalW -= parseInt($(this).css("width"));
}
});
});
}
This is fairly easy using flexbox. See the snippet below. I've added a wrapper container to control flow and set a global height. Borders have been added as well to identify the elements. Notice that divs now expand to the full height as well, as required.
Vendor prefixes should be used for flexbox in a real world scenario since is not yet fully supported.
I've developed a free tool to understand and design layouts using flexbox. Check it out here:
http://algid.com/Flex-Designer
.container{
height:180px;
border:3px solid #00f;
display:flex;
align-items:stretch;
}
div {
display:flex;
border:3px solid #0f0;
}
.second {
display:flex;
flex-grow:1;
border:3px solid #f00;
}
<div class="container">
<div>Tree</div>
<div class="second">View</div>
</div>
.btnCont {
display: table-layout;
width: 500px;
}
.txtCont {
display: table-cell;
width: 70%;
max-width: 80%;
min-width: 20%;
}
.subCont {
display: table-cell;
width: 30%;
max-width: 80%;
min-width: 20%;
}
<div class="btnCont">
<div class="txtCont">
Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
</div>
<div class="subCont">
This column as well as the entire container works like a table. Isn't Amazing!!!
</div>
</div>
.container{
display: flex;
align-items: stretch;
}
.resize_overflow {
position: relative;
width: 0;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
/* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */
}
.second_fix {
float: right;
/* or:
display: flex;
align-self: end;*/
}
/* Dissolve the end of the line at the right edge */
.resize_overflow::after {
content: ""; /* Empty content */
position: absolute; /* Position relative to parent */
right: 0; /* Element position */
top: 0; /* Element position */
width: 40px; /* Gradient width */
height: 100%; /* Parent Height */
background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%);
}
<div class="container">
<div class="resize_overflow">Tree</div>
<div class="second_fix">View</div>
</div>
Have a look at the available CSS layout frameworks. I would recommend Simpl or, the slightly more complex, Blueprint framework.
If you are using Simpl (which involves importing just one simpl.css file), you can do this:
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
, for a 50-50 layout, or :
<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>
, for a 25-75 one.
It's that simple.
If both of the widths are variable length why don't you calculate the width with some scripting or server side?
<div style="width: <=% getTreeWidth() %>">Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I want a two-column div layout, where each one can have variable width e.g.
div {
float: left;
}
.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space.
Currently, my 'view' div is resized to content it contains
It will also be good if both divs take up the whole height.
Not duplicate disclaimer:
Expand div to max width when float:left is set
because there the left one has a fixed width.
Help with div - make div fit the remaining width
because I need two columns both aligned to left
The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.
Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.
This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.
Demos:
Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/
div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>
I just discovered the magic of flex boxes (display: flex). Try this:
<style>
#box {
display: flex;
}
#b {
flex-grow: 100;
border: 1px solid green;
}
</style>
<div id='box'>
<div id='a'>Tree</div>
<div id='b'>View</div>
</div>
Flex boxes give me the control I've wished css had for 15 years. Its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the CSS Flexbox flex-grow property to fill the remaining space.
html, body {
height: 100%;
}
body {
display: flex;
}
.second {
flex-grow: 1;
}
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>
This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.
If both the columns were fixed width, this would be easy.
If one of the columns was fixed width, this would be slightly harder but entirely doable.
With both columns variable width, IMHO you need to just use a two-column table.
Use calc:
.leftSide {
float: left;
width: 50px;
background-color: green;
}
.rightSide {
float: left;
width: calc(100% - 50px);
background-color: red;
}
<div style="width:200px">
<div class="leftSide">a</div>
<div class="rightSide">b</div>
</div>
The problem with this is that all widths must be explicitly defined, either as a value(px and em work fine), or as a percent of something explicitly defined itself.
Check this solution out
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.content {
background-color: red;
height: 200px;
width: auto;
margin-left: 200px;
}
.item {
width: 25%;
background-color: blue;
float: left;
color: white;
}
.clearfix {
clear: both;
}
<div class="container">
<div class="clearfix"></div>
<div class="sidebar">width: 200px</div>
<div class="content">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
</div>
</div>
Here, this might help...
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="clear" />
</div>
</body>
</html>
If the width of the other column is fixed, how about using the calc CSS function working for all common browsers:
width: calc(100% - 20px) /* 20px being the first column's width */
This way the width of the second row will be calculated (i.e. remaining width) and applied responsively.
I don't understand why people are willing to work so hard to find a pure-CSS solution for simple columnar layouts that are SO EASY using the old TABLE tag.
All Browsers still have the table layout logic... Call me a dinosaur perhaps, but I say let it help you.
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
<tr>
<td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
<td bgcolor="#F0F0F0">View</td>
</tr>
</table>
Much less risky in terms of cross-browser compatibility too.
<html>
<head>
<style type="text/css">
div.box {
background: #EEE;
height: 100px;
width: 500px;
}
div.left {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.right {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">Tree</div>
<div class="right">View</div>
<div class="right">View</div>
<div style="width: <=100% getTreeWidth()100 %>">Tree</div>
<div class="clear" />
</div>
<div class="ColumnWrapper">
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
</div>
</body>
</html>
You can try CSS Grid Layout.
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column: 1;
}
dd {
grid-column: 2;
margin: 0;
background-color: #ccc;
}
<dl>
<dt>lorem ipsum</dt>
<dd>dolor sit amet</dd>
<dt>carpe</dt>
<dd>diem</dd>
</dl>
flex-grow - This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). See more here
.parent {
display: flex;
}
.child {
flex-grow: 1; // It accepts a unitless value that serves as a proportion
}
.left {
background: red;
}
.right {
background: green;
}
<div class="parent">
<div class="child left">
Left 50%
</div>
<div class="child right">
Right 50%
</div>
</div>
A slightly different implementation,
Two div panels(content+extra), side by side, content panel expands if extra panel is not present.
jsfiddle: http://jsfiddle.net/qLTMf/1722/
You can use W3's CSS library that contains a class called rest that does just that:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-row">
<div class="w3-col " style="width:150px">
<p>150px</p>
</div>
<div class="w3-rest w3-green">
<p>w3-rest</p>
</div>
</div>
Don't forget to link the CSS library in the page's header:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Here's the official demo: W3 School Tryit Editor
Im not sure if this is the answer you are expecting but, why don't you set the width of Tree to 'auto' and width of 'View' to 100% ?
I wrote a javascript function that I call from jQuery $(document).ready(). This will parse all children of the parent div and only update the right most child.
html
...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....
javascript
$(document).ready(function(){
stretchDivs();
});
function stretchDivs() {
// loop thru each <div> that has class='stretch'
$("div.stretch").each(function(){
// get the inner width of this <div> that has class='stretch'
var totalW = parseInt($(this).css("width"));
// loop thru each child node
$(this).children().each(function(){
// subtract the margins, borders and padding
totalW -= (parseInt($(this).css("margin-left"))
+ parseInt($(this).css("border-left-width"))
+ parseInt($(this).css("padding-left"))
+ parseInt($(this).css("margin-right"))
+ parseInt($(this).css("border-right-width"))
+ parseInt($(this).css("padding-right")));
// if this is the last child, we can set its width
if ($(this).is(":last-child")) {
$(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
} else {
// this is not the last child, so subtract its width too
totalW -= parseInt($(this).css("width"));
}
});
});
}
This is fairly easy using flexbox. See the snippet below. I've added a wrapper container to control flow and set a global height. Borders have been added as well to identify the elements. Notice that divs now expand to the full height as well, as required.
Vendor prefixes should be used for flexbox in a real world scenario since is not yet fully supported.
I've developed a free tool to understand and design layouts using flexbox. Check it out here:
http://algid.com/Flex-Designer
.container{
height:180px;
border:3px solid #00f;
display:flex;
align-items:stretch;
}
div {
display:flex;
border:3px solid #0f0;
}
.second {
display:flex;
flex-grow:1;
border:3px solid #f00;
}
<div class="container">
<div>Tree</div>
<div class="second">View</div>
</div>
.btnCont {
display: table-layout;
width: 500px;
}
.txtCont {
display: table-cell;
width: 70%;
max-width: 80%;
min-width: 20%;
}
.subCont {
display: table-cell;
width: 30%;
max-width: 80%;
min-width: 20%;
}
<div class="btnCont">
<div class="txtCont">
Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
</div>
<div class="subCont">
This column as well as the entire container works like a table. Isn't Amazing!!!
</div>
</div>
.container{
display: flex;
align-items: stretch;
}
.resize_overflow {
position: relative;
width: 0;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
/* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */
}
.second_fix {
float: right;
/* or:
display: flex;
align-self: end;*/
}
/* Dissolve the end of the line at the right edge */
.resize_overflow::after {
content: ""; /* Empty content */
position: absolute; /* Position relative to parent */
right: 0; /* Element position */
top: 0; /* Element position */
width: 40px; /* Gradient width */
height: 100%; /* Parent Height */
background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%);
}
<div class="container">
<div class="resize_overflow">Tree</div>
<div class="second_fix">View</div>
</div>
Have a look at the available CSS layout frameworks. I would recommend Simpl or, the slightly more complex, Blueprint framework.
If you are using Simpl (which involves importing just one simpl.css file), you can do this:
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
, for a 50-50 layout, or :
<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>
, for a 25-75 one.
It's that simple.
If both of the widths are variable length why don't you calculate the width with some scripting or server side?
<div style="width: <=% getTreeWidth() %>">Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>