Rectangle 27 39

By setting the CSS max-width property to 100%, an image will fill the width of it's parenting element, but wont render larger than it's actual size, thus preserving resolution.

Setting the height property to auto maintains the aspect ratio of the image, using this technique allows static height to be overridden and enables the image to flex proportionally in all directions.

img {
    max-width: 100%;
    height: auto;      
}
height
auto

image - CSS: 100% width or height while keeping aspect ratio? - Stack ...

css image height width
Rectangle 27 2

Why is this solution better than setting main content width?

The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.

  • We have floated element on the right with width = X
  • We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.

Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.

<div id="parent">
    <div id="floated">Foo bar</div>
    <div id="content">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>
#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.

Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.

html - Css - Don't want elements below my floated element - Stack Over...

html css overflow css-float hidden
Rectangle 27 2

Why is this solution better than setting main content width?

The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.

  • We have floated element on the right with width = X
  • We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.

Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.

<div id="parent">
    <div id="floated">Foo bar</div>
    <div id="content">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>
#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.

Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.

html - Css - Don't want elements below my floated element - Stack Over...

html css overflow css-float hidden
Rectangle 27 4

With CSS3, you can use calc():

$('div').css({
    height: 'calc(30%-5px)';
});

Note that this has limited browser support. Considering finding a value that can be used as a fallback (such as height: 29%).

javascript - Setting element height/width to a combination of percent ...

javascript jquery html css
Rectangle 27 4

With CSS3, you can use calc():

$('div').css({
    height: 'calc(30%-5px)';
});

Note that this has limited browser support. Considering finding a value that can be used as a fallback (such as height: 29%).

javascript - Setting element height/width to a combination of percent ...

javascript jquery html css
Rectangle 27 2

calc()
$('div').css({
    height: 'calc(30% - 5px)';
});

javascript - Setting element height/width to a combination of percent ...

javascript jquery html css
Rectangle 27 2

calc()
$('div').css({
    height: 'calc(30% - 5px)';
});

javascript - Setting element height/width to a combination of percent ...

javascript jquery html css
Rectangle 27 3

You can simply use:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: 100%;
height: 100%;
<div>
  <div>
    <div style="border: 2px solid #000000; width:100%; height:100%; position: absolute;">Innermost Div</div>
  </div>
</div>

What? I am not sure what you are meaning about "agreement"! @GRC.

Setting the height and width of inner most html element - Stack Overfl...

html
Rectangle 27 15

Labels are inline elements by default, so setting the width and height does nothing.

label { display: block; }

(However, the practice of putting the label around the checkbox it is supposed to be associated with, rather than explicitly using for, doesn't work in IE.)

display: block works for width, but not for height. But thanks a lot for that IE warning! I guess I can wrap the input element in a label AND put a for attribute in there, right?

Yes, you can. Actually having just checked it, this is fixed in IE7; it's only IE6 that would suffer. You can set height on a block, but if you set a percentage height, the parent element (to which the percentage is relative) must have a height specified itself.

Well, in this case, the parent element has no height specified.. So what do I do?

Well, the height of the TD depends on its content. Is there no way for CSS to say: "Once we've determined the dimensions of the TD element, make the label element 100% of the TDs width and height"?

No, because the height of the <td>'s content area is the height of the <label>. Without knowing the height of the static flow content in the cell, you can't know the auto height of the cell.

css - How can a

css
Rectangle 27 2

This is good example unfortunately I found this to work on some browsers and not on the others.

Setting the height and width of inner most html element - Stack Overfl...

html
Rectangle 27 5

I fixed it setting the root element layout parameters.

int width = activity.getResources().getDisplayMetrics().widthPixels;
int height = activity.getResources().getDisplayMetrics().heightPixels;
content.setLayoutParams(new LinearLayout.LayoutParams(width, height));

android - How to set DialogFragment's width and height? - Stack Overfl...

android android-fragments android-dialog android-dialogfragment
Rectangle 27 5

I fixed it setting the root element layout parameters.

int width = activity.getResources().getDisplayMetrics().widthPixels;
int height = activity.getResources().getDisplayMetrics().heightPixels;
content.setLayoutParams(new LinearLayout.LayoutParams(width, height));

android - How to set DialogFragment's width and height? - Stack Overfl...

android android-fragments android-dialog android-dialogfragment
Rectangle 27 15

You can use CSS tables:

.wrapper {
  display: table;
  width: 100%;
  margin: 15px 0;
}

.horizontal.wrapper > div {
  display: table-cell;
  white-space: nowrap; /* Prevent line wrapping */
  border: 1px solid;
}
.left { width: 100px } /* Minimum width of 100px */
.center { width: 0; }  /* Width given by contents */

.vertical.wrapper { height: 200px; }
.vertical.wrapper > div {
  display: table-row;
}
.vertical.wrapper > div > span {
  display: table-cell;
  border: 1px solid;
}
.top    { height: 100px; } /* Minimum heigth of 100px */
.middle { height: 0; }     /* Height given by content */
.bottom { height: 100%; }  /* As tall as possible */
<div class="horizontal wrapper">
  <div class="left">100px wide</div>
  <div class="center">Auto width, given by contents</div>
  <div class="right">Remaining space</div>
</div>
<div class="vertical wrapper">
  <div class="top"><span>100px tall</span></div>
  <div class="middle"><span>Auto height, given by contents</span></div>
  <div class="bottom"><span>Remaining space</span></div>
</div>

The horizontal case can also be achieved with floats:

#wrapper, .right { overflow: hidden; } /* Establish BFC */
#wrapper > div { border: 1px solid; }
.left, .middle { float: left; }
.left { width: 100px }
<div id="wrapper">
  <div class="left">100px</div>
  <div class="middle">Auto width, given by contents</div>
  <div class="right">Remaining space</div>
</div>

javascript - Setting a length (height or width) for one element minus ...

javascript jquery css css3 flexbox
Rectangle 27 12

If you want to create an element with a set ratio (height: % of it's own width), the best way to do that is by effectively setting the height using padding-bottom. Example for square:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Percentage Height HTML 5/CSS - Stack Overflow

html css height
Rectangle 27 12

If you want to create an element with a set ratio (height: % of it's own width), the best way to do that is by effectively setting the height using padding-bottom. Example for square:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Percentage Height HTML 5/CSS - Stack Overflow

html css height
Rectangle 27 1

% ==> Defines the height in percent of the containing block

so with height=100% you cannot do it because 100% is related to parent block, but you can do it with px, em, wh and vw. What I will do is set body height to min-height, set most inner div min-height to the same height as well.

SIDE NOTE: You do not need to do height = 100% and width = 100% on body element. they are already 100% as default.

Setting the height and width of inner most html element - Stack Overfl...

html
Rectangle 27 6

Flexbox can do that.

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#top {
  background-color: lightgreen;
}
#bottom {
  background-color: lightblue;
  flex: 1;
}
<div id="container">
  <div id="top">green box variable height</div>
  <div id="bottom">blue box no longer overflows browser window</div>
</div>

This doesn't really work. Here's 2 examples of some HTML that fill their containers. Example #1. Example #2. Once placed in a flexbox they no longer correctly fill their containers. The workaround is here, the solution involving position: absolute;. The solution above leaves the browser in a state that breaks all kinds of content.

javascript - Setting a length (height or width) for one element minus ...

javascript jquery css css3 flexbox
Rectangle 27 5

I'm looking for something simple and portable. In the same way a CSS property can be easily applied across documents, I'm looking for something similar in terms of ease-of-application for this function.

This can be achieved using CSS only. As you do not prefer a flex layout solution, the next best bet would be a table layout.

A simple CSS snippet which you could drop into your project (and be done with) would look like this:

div.flexh {
    display: table; box-sizing: border-box; padding: 0; margin: 0;
}
div.flexh > div { 
    display: table-cell; width: auto; 
    box-sizing: border-box; vertical-align: middle;
}
div.flexh > div:first-child {
    /* Override your custom styling below */
    min-width: 75px; width: 75px; max-width: 75px; 
}
div.flexh > div:last-child { width: 100%; }

You can then add your site-specific styling to this base CSS as per site requirements. Like, nowrap etc.

Two apparent advantages of this solution are:

  • You do not need to change your markup and also do not need to decorate all children with classes. Just apply the class flexh to your parent div and that would be it.
<div class="flexh">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>
  • You are not limited to just three columns. You could have as many columns as need be. The first one will have fixed width, the last one will be flexible, and all the columns in-between would get content-based widths.
div.flexh {
    display: table; box-sizing: border-box; padding: 0; margin: 0;
    /* Override your custom styling below */
    width: 80%; border: 2px solid black;
    border-right: 2px dashed black; 
    font-size: 1em;
}
div.flexh > div { 
    display: table-cell; width: auto; 
    box-sizing: border-box; vertical-align: middle;
    /* Override your custom styling below */
    background-color: lightgreen; border: 1px solid #ddd;
    padding: 15px 5px;
}
div.flexh > div:first-child {
    /* Override your custom styling below */
    min-width: 75px; width: 75px; max-width: 75px; 
    background-color: orange;
}
div.flexh > div:last-child {
    width: 100%;
    /* Override your custom styling below */
    background: skyblue;
}
<div class="flexh">
    <div>75px Fixed Width</div>
    <div>Variable Content Width</div>
    <div>Flexible Remaining Width</div>
</div>

<hr/>
<div class="flexh">
    <div>75px Fixed Width</div>
    <div><img src='//placehold.it/128x48/66c' /></div>
    <div>Flexible Remaining Width</div>
</div>

<hr/>
<div class="flexh">
    <div>75px Fixed Width</div>
    <div>Variable TextWidth</div>
    <div>
        <img src='//placehold.it/128x48/66c' />
        <p>Variable ContentWidth</p>
    </div>
    <div>Flexible Remaining Width</div>
</div>

This is a bit tricky to achieve without flex layout. A table layout would not work here mainly because, the table-row would not keep a fixed height as required by your use-case. The height on a table-row or table-cell is only an indicative of the minimum height required. If the space is constrained, or the content exceeds the available space, then the cell or row will increase its height depending on the content.

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells...

...the height of a cell box is the minimum height required by the content

Therefore, you can restrict the height indirectly either using inner markup like a div element, or let go of the table-layout and calculate the height for the flexible one. In your use-case, you prefer not to change the markup, hence I am not proposing an inner markup.

The best-bet here would be to use the time-tested model of plain block-level divs with the height of the flexible one to be calculated. As you have already discovered that it is not possible with CSS, you will need a small JavaScript snippet to do that for you.

A simple JavaScript snippet (no jQuery) which you could wrap in a window.load and drop into your project (and be done with) would look like this:

var flexv = document.querySelectorAll('div.flexv');
/* iterate the instances on your page */    
[].forEach.call(flexv, function(div) {
    var children = [].slice.call(div.children), // get all children
        flexChild = children.splice(-1, 1),     // get the last child
        usedHeight = 0, totalHeight = div.offsetHeight;

    children.forEach(function(elem) {
        usedHeight += elem.offsetHeight; // aggregate the height
    });
    /* assign the calculated height on the last child */
    flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});

The CSS snippet is more or less like the horizontal one, sans table layout, which also you could just drop into your project and just add the additional site-specific styling. Minimal markup required remains the same.

document.addEventListener("load", flexit);

function flexit(e) {
	var flexv = document.querySelectorAll('div.flexv');
	[].forEach.call(flexv, function(div) {
		var children = [].slice.call(div.children), 
			flexChild = children.splice(-1, 1), 
			usedHeight = 0, totalHeight = div.offsetHeight;
		children.forEach(function(elem) {
			usedHeight += elem.offsetHeight;
		});
		flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
	});
}
div.flexv {
    display: inline-table; box-sizing: border-box; padding: 0; margin: 0; 
    overflow: hidden;
    /* Override your custom styling below */
    height: 320px; width: 20%; border: 1px solid black; font-size: 1em;
    margin: 8px;
}
div.flexv > div { 
    display: block; height: auto; box-sizing: border-box; 
    overflow: hidden;
    /* Override your custom styling below */
    background-color: lightgreen; border: 1px solid #ddd;
    padding: 5px 15px;
}
div.flexv > div:first-child {
    /* Override your custom styling below */
    min-height: 36px; height: 36px; max-height: 36px; 
    background-color: orange;
}
div.flexv > div:last-child {
    height: 100%;
    /* Override your custom styling below */
    background: skyblue;
}
<div class="flexv">
    <div>36px Fixed Height</div>
    <div>Variable Content Height</div>
    <div>Flexible Remaining Height</div>
</div>

<div class="flexv">
    <div>36px Fixed Height</div>
    <div><img src='//placehold.it/64x72/66c' /></div>
    <div>Flexible Remaining Height</div>
</div>

<div class="flexv">
    <div>36px Fixed Height</div>
    <div>Variable Text Height</div>
    <div>
        <img src='//placehold.it/72x48/66c' />
        <p>Variable Content Height</p>
    </div>
    <div>Flexible Remaining Height</div>
</div>
display: inline-table
block
inline-block

As FF don't like having anything but cells inside a table, the vertical solution doesn't work equally well on it. Is there a way you can compensate that with your script?

@LGSon: Thank you for the observation. (1) In that case it seems FF is not following the specs. The specs clearly state that anonymous boxes will be generated when table elements are missing. Ref here and here. (2) In any case, a table-based solution will not work for Op's use-case. The inline-table part was a left-over from a previous attempt. It should've been inline-block for the demo purpose. Shall fix the answer shortly.

You're welcome. The FF issue came from this post, which actually used inline-block, so they will likely mess up your demo as well (on FF).

I made both the 2 demos in the question using display: table, so how you mean it don't work, as mine obviously does?

@LGSon: I see only one demo of yours and that doesn't have a fixed top section in vertical layout. Do let me know if I am missing something.

javascript - Setting a length (height or width) for one element minus ...

javascript jquery css css3 flexbox
Rectangle 27 3

As I commented earlier, and besides flex, this is also solvable using display: table and here is a fiddle demo I made showing that.

If a fixed top also were required for the vertical demo, here is an update of my original display:table version: fiddle demo

Sometimes I haven't been able (or didn't want) to use either flex nor tables, and I have, on and off, looked into making use of css calc() and css attr().

Both come short though, as calc() can only use +-*/ and attr() can only return a string value, which can't be computed by calc().

My suggestion, using plain javascript, is based on that these 2 methods, at some point, might be extended so we can make better use of them.

width: calc(100% - attr(this.style.left))

but as they don't, and I can't add it to my css either as it wouldn't validate properly (might even break the parsing, who knows) I added a variant as an attribute on the element instead, with some quirks to make it easier to compute.

//height
<div id="bottom" data-calcattr="top,height,calc(100% - toppx)">...</div>

//width 
<div class="box right" data-calcattr="left,width,calc(100% - leftpx)">...</div>

Together with below script, which by no means is fully developed/tested on all property combinations, it does adjust the div's size.

In short, when runned, it take the attribute, split it into an array, take the first item value as from which property to read, the second to which property to set and the third to which the read value gets inserted/replaced and assigned to the property to be set (hmmm, still working on a better way to express this, but hopefully the script is clear enough with whats going on).

Here is a fiddle showing both the height and width demo, integrated, making use of the same script.

function calcattr() {
    var els = document.querySelectorAll('[data-calcattr]');
    for (i = 0; i < els.length; i++) {
        var what = els[i].getAttribute('data-calcattr');
        if (what) {
            what = what.split(',');
            var rect = els[i].getBoundingClientRect();
            var parentrect = els[i].parentNode.getBoundingClientRect();
            var brd = window.getComputedStyle(els[i].parentNode,null).getPropertyValue('border-' + what[0] + '-width');            
            what[2] = what[2].replace(what[0],parseInt(rect[what[0]]-parentrect[what[0]]) - parseInt(brd));
            els[i].setAttribute("style", what[1] + ":" + what[2]);
        }
    }
}

javascript - Setting a length (height or width) for one element minus ...

javascript jquery css css3 flexbox
Rectangle 27 2

When you declare margin: 1% it is setting all 4 margins based on the width of the parent element. So, the width is affecting your height in this case.

html - Why are the inner divs height depending on the container width?...

html css height margin percentage