Mixing Percent and Fixed CSS

Mixing percent and fixed CSS

+1 Good question. You may want to have a look at this article: "Fixed-width, liquid, and elastic layout" It goes over fixed width layout (em) and elastic layouts (%), and if you click to go to the next page it looks at 'Elastic-liquid hybrid' - where width: is set one way, with max-width: set the other. I know the article linked to above isn't exactly what you asked, but it's an example of mixed use within a single CSS style.

---

Edit: After some further reading I did find a quite a few contradictory opinions on the subject. I found several articles that held the idea that "you just can’t mix up pixels and percentages". Though, for the most part, these sites were fairly dated. When I narrowed the search to only articles that have been put up within the past year, things changed a bit. There were still a few opinions against mixing, but they typically didn't explain why, and seemed to of the "I always heard it was a bad idea" variety.
The majority of more recent information that I've found on the topic seems to indicate that mixing percentage with fixed widths is a perfectly acceptable practice, as long as it's done with an understanding of the results.

see:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (Jun 2009)
• "For A Beautiful Web: Changing Man Layout"
  ...

Full Disclosure: I've been a mixer for many years, without really knowing whether my approach was 'correct.'

mixing percent and px in css without using calc()

Demo Fiddle

No calc needed!

Simply set the postion of the parent container to relative then the children to absolute, anchoring the content with a bottom of zero and top of 35 (the height of the header).

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
}
.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    position:relative;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
}
.content_container_t {
    width: 100%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
    top:35px;
    bottom:0;
}
.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}
ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
}

How-to mix fixed and percentage heights/width using css without javascript

See: http://jsfiddle.net/s7FH6/show/ (edit)

HTML:

<div id="header"></div>
<div id="content"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden
}
#header {
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px
}
#content {
    background: #eee;
    position: absolute;
    left: 0;
    top: 150px;
    bottom: 0;
    width: 100%;
    overflow-y: scroll
}

Combine auto, fixed, and percentage width in same HTML table row

There might be a more official way to do this, but the thing I've found works is to just set the cell width to 1px. The content size overrides it, so it will just collapse to content size.

.lbl {
  text-align: right;
  font-style: italic;
  width: 1px;
}

By the way, the calc seems to be overridden by table formatting, but it doesn't seem like you need it from what you described.

See it in action: https://jsfiddle.net/vf5p0m82/1/

Mixing fixed with and percentage width

You can use left and right on #rightPane instead of width. You also need to make #app-view positioned relatively and both panes absolute.

#app-view
{
    width: 100%;
    height: 400px;
    position: relative;
}

#leftPane, #rightPane 
{
    height: 100%;
    position: absolute;
}

#leftPane
{
    width: 250px;
    background: blue;
}

#rightPane
{
    left: 250px;
    right: 0;
    background: green;
}

JSFiddle

HTML table cell column mixing fixed widths + percentages

Width calculation for tables is a bit clunky, but can be improved by using table-layout: fixed because then cell widths will no longer be calculated based on what's inside the cells. And then you may not even need calc() anymore, although you definitely can.

It should also be noted that a table by default takes up the least width possible, it usually gets better if we tell the table to use 100% width (or whatever is needed in your case).

width: 100% combined with table-layout: fixed and no calc() gives the following results:

table {
  width: 100%;
  table-layout: fixed;
}

td {
  background: #eee;
  height: 70px;
}

td.fixed {
  width: 50px;
}

td.rest {
  width: 50%;
  background: #fca;
}

<table>
  <tbody>
    <tr>
      <td class="fixed">1</td>
      <td class="fixed">234</td>
      <td class="rest">a</td>
      <td class="rest">bcd efg</td>
    </tr>
  </tbody>
</table>

table-layout fixed with mixed px and %

The remaining space, after the cell with pixels is set, will be divided in 200% for 3:rd column and 100% for the 4:th.

Which means 2/3 and 1/3 of whats left, so if you were to change the 3:rd and 4:th column to 66% and 33%, you will end up with same end result, but if you make those as well pixel width, they either overflow with a horizontal scroll or the stretch compared to the pixel width percentage of total width.

So what happens is, the 2 columns, with their combined width, comes off the containers total width, before it calculate the ones with percent, as pixel width has higher priority being a fixed size unit.

Src: https://www.w3.org/TR/CSS21/tables.html#width-layout

Mixing a few position:fixed Div's

Since an element with a fixed position doesn't look at its parents width when it's given a percentage width, you will need to adjust the width in the calc, so that it has accounted for the 25px margin. What I've done to the code below is first get the pagewidth - 25px, then divide it by 4 to get 25%

#redFixedDiv{
    height: 100px; background-color: red;  
    width: calc((100% - 25px) / 4);
    position: fixed;                       
}

CSS combining % and px width

You shouldn't mix relative and absolute values, since it's hard or even impossible to calculate correct margins or position values with CSS only.

calc() hasn't been implemented in any browser and is "at-risk and may be dropped during the CR period".

If you still want to achieve something like this you should consider the following:

<div class="box">   
    <div class="left">left content</div>   
    <div class="right-wrapper">    
        <div class="right">right content</div>
    </div>      
</div>

.left{
    float:left;
    width: 100px;
}
.right-wrapper{
    margin-left:100px;
}
.right{
    margin-left: 5%;
}

JSFiddle Demo

Position fixed element with percentage width relative to container

You can get the effect that you want as follows.

Your HTML snippet is good as is:

<div id="content">
    <section>
        <h1>Heading 1</h1>
        <p>...</p>
    </section>
    <section>
        <h1>Heading 2</h1>
        <p>...</p>
    </section>
</div>

and the CSS is good but just requires some explanation:

#content {
    overflow: visible; /* default, but important to notice */
}

section {
    float: left;
    width: 25%;
}

h1 {
    position: fixed;
    width: 25%;
    background: #00FF00;
    text-align: center;
}

and the demo fiddle: http://jsfiddle.net/audetwebdesign/4zLMq/

How This Works

Your #content block takes up the remaining width to the right of your 200px left floated sidebar.

Within #content, you have two left-floated section elements that take up 25% of the parent container, which in this case, is the width of the view port panel.

Your child h1 elements have position: fixed, which means that their width of 25% is also computed based on the width of the viewport (not #content).

Case 1
If you want h1 and #content to have the same width, they need to have the same relative (25%) computed from the same containing block (view port in this case).

However, the value of 25% is not 25% of the remaining space after you account for the floated sidebar. However, maybe you can live with this.

Case 2
You could make the width values a bit easier to determine if you set the sidebar width to be a relative value. Using mixed units is always an issue.

---

Related Topics