How to style five rows with alternating fixed/variable width?


Tags: html,css

Problem :

Example:

<div class="container">
    <div>variable</div>
    <div>fixed</div>
    <div>variable with min-width</div>
    <div>fixed</div>
    <div>variable</div>
</div>

I want the whole thing to be as wide as the viewport.

I know how to do that for three columns, but I am completely lost with the five column version. I do not even have a concept of how that could work. The usual three column style involves absolute positioning of the fixed columns, but that would not work since the outermost columns are of variable width. I am lost.

Any ideas?

This is what I tried:

HTML:

<div class="container">
    <div class="left">var</div>
    <div class="inner_container">
        <div class="inner_left">fix</div>
        <div class="middle">var</div>
        <div class="inner_right">fix</div>
    </div>
    <div class="right">var</div>
</div>

CSS:

.container { 
    position:relative;
}
.container div { 
    background: yellow;
}
.container .left,
.container .right {
    background: orange;
    width: 15%;
}

.inner_container { 
    position:relative;
}
.inner_container div {
    margin:0 50px;
    background:lightgreen;
}
.inner_container .inner_left,
.inner_container .inner_right {
    background:lightblue;
    position:absolute;
    top:0;
    width:50px;
}
.inner_container .inner_left {
    left:-50px;
}
.inner_container .inner_right {
    right:-50px;
}

The "inner_container" is basically the usual three column solution. If I set the inner_container to "left: 15%" the whole inner container is moved to the right, but still on its own "line".



Solution :

flexbox can do that.

* {
  box-sizing: border-box;
}

.container div {
  height: 75px;
  border:1px solid grey;
}

.container {
  display: flex;
}

.variable {
  background: lightgreen;
  flex: 1 0 auto
}

.fixed {
  background: lightblue;
  flex: 0 0 150px;
}

.min-width {
  flex-basis:250px;
  min-width:250px;
  background: pink;
}
<div class="container">
  <div class="variable">variable</div>
  <div class="fixed">fixed</div>
  <div class="variable min-width">variable with min-width</div>
  <div class="fixed">fixed</div>
  <div class="variable">variable</div>
</div>

Codepen Demo


    CSS Howto..

    Hide Show content-list with only CSS, no javascript used

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    Selected text showing oversized selection area

    How to make a child div alone responsive using css?

    How to set icon of an page using CSS

    How to make a pentagon fold in half with CSS animation?

    How to define a document in javascript? WebStorm

    how to change the background color of the holder of an image using jquery cycle

    Prevent div from showing after slideUp() - jQuery

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to center two blocks with some gap inbetween using CSS?

    how to align first li left and second li center in the ul element

    How to get the “declared” CSS value, not the computed CSS value

    Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How to use css styling in html with multiple directories?

    How to make the html table on same line? Wordpress, woocommerce

    How to remove a css class using jquery in a certain screen size

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    image shows ui-button over the button image

    How can I get rid of these shadows on my text in Internet Explorer?

    How to target and style specific elements using CSS

    How do I link an external css to overwrite bootstrap css for centering elements?

    How do i put an X on the right side of a block?

    How can one use scroll bar images?

    how can I make my navbar scroll smoothly to the top on page click

    Show header below fixed nav when clicking hash tag link

    how to format a single html a href text to have multiple css properties (two different font families)

    How to have an image zoom in and out automatically in the background

    How to calculate width of unused space for page with fixed width?