Adaptive Style Sheets Strategy

The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on the container.

Image 1: Image 2

Here is my current approach:

/* the one with black border :) */
.container{
    position: relative;
}
.red{
    position: absolute;
    top: 0;
    width: 100px;
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
.yellow{
    margin: 0 110px;
}

Although I am almost satisfied with this setup, I have noticed that when the red blocks exceed the height of the container, the container does not adjust its height accordingly. This behavior is expected since the children elements are positioned absolutely within the container.

Answer №1

Have you thought about utilizing CSS3 Flex Box for your layout? Here's an example:

HTML:

<div class="container">
   <div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div>
   <div class="yellow">yellow<br>yellow</div>
   <div class="red red-right">red-right</div>
</div>

CSS:

.container{
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;        
}

.red{
    background-color:red;  
    width:100px; 
}

.yellow{     
    background-color:yellow;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

​Check out this Fiddle:

http://jsfiddle.net/lucaslazaro/sjYNy/

EDIT:

To learn more about Flex Box, I recommend this informative tutorial: http://www.html5rocks.com/pt/tutorials/flexbox/quick/

Answer №2

Perhaps this will be useful:

HTML

<div class="container">
    <div class="red red-left">red-left<br>red-left<br>red-left</div>
    <div class="yellow">yellow<br>yellow</div>
    <div class="red red-right">red-right</div>
</div>

CSS

/* the one with black border :) */
.container{
    position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
    position: absolute;
    top: 0;
    width: 100px;
    background:red;
    height:auto
}
.red-left{
    left:0;
}
.red-right{
    right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
    margin: 0 110px;
    background:yellow
}

​​DEMO

Answer №4

Utilizing:

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

div > div {
    display: table-cell;
}

Check out the complete code here:

http://jsfiddle.net/BF6La/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

The alignment of Bootstrap table headers in a Vue.js component needs adjusting for better display

Is there a way to ensure proper alignment of headers and column bodies in my Vue.js DataGrid component when utilizing the vuedraggable package for column reordering? Below is the code snippet for my DataGrid.vue component: <template> <div class ...

Tips on concealing the visibility of a table row using PHP

My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...

Center the text within a span element in an inline-block container

I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

Issue with Bootstrap NavBar collapsing properly on first element

I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...

Is it possible to align an entire column to the right in the Material UI Data Grid?

I'm currently exploring Material UI and grappling with a specific challenge. Is there a method within Material UI to create a Data Grid with two columns, one left-aligned and the other right-aligned? I've managed to align the headers as desired, ...

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it ...

Deciphering the sequence of operations in a CSS style sheet

Review the CSS stylesheet below: #start_experiment_button { display: inline-block; color: black; border: 3px outset gray; background-color: #CCCCCC; padding: 8px; text-decoration: none; font-family: Arial, Helvetica; font-weight: bol ...

adjust back side height of flip box does not function on IE web browser

I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

Having an issue with jQuery where trying to append a remove button to a list results in the

Looking to create a dynamic list where users can easily add new items by clicking a button. As each item is added, a corresponding remove button should also be displayed. The issue I'm facing is that every time a new item is added, an extra close but ...

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

Setting a constant width for text characters across all devices using CSS and HTML

I am looking to display text in my textarea with the same width in pixels across all devices. Essentially, I want to set the character width in pixels so that it appears consistently on any device (Desktop/Mobile). <html> <head> <styl ...