3 column layout, same height, middle column full size. How to do it without “table-cell”


Tags: html,css

Problem :

how to make 3 column layout where:

  • left column is fixed width
  • middle column is auto width (not fixed)
  • right column is fixed width

and all columns height are equal (but exact height is unknown)

Example:

example

I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.

Is there some css hack available to do it without table-cell ?

Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)

Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face

Edit3: no js please



Solution :

Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview


    CSS Howto..

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

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

    Slideshow flickering image on :hover

    how to add a class to buttons attribute using css or jquery

    How to show the vertical image into horizontal manner using HTML and CSS?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to convert HTML button to HTML input, while keeping all CSS?

    How to add atributes on pic stored from database [closed]

    I want to make semi-identical manu like the one on this page - how? [closed]

    How to overlap other elements using resizable element?

    How to change the style of horizontal menu

    How can I achieve this Flash effect using jQuery?

    How to display vertical text in table headers with auto height / without text overflow?

    How to call a image class on a regular interval

    How to apply css for only second occurance

    How to stretch a header across a web page background with CSS

    How To Add Links To Right Of Header?

    How can I get the bottom padding of an input working in IE8?

    How to make table by CSS?

    How to get width of
  • stretched to available space in parent
      in IE7?
  • Resize the content of a div based on how many objects are in the div

    How can I get the body to continue look the same when a div inside overflows to the right?

    How can I make buttons flash different background colors when clicked/

    How make to flow around a triangular block?

    How to change asp:DropDownList extended background color ? CSS class

    How to change content of a div by clicking a button outside the div?

    how to make css hover just only in a bullet area

    How to create a circumference with CSS? [closed]

    CSS - How to select multiple attribute values?

    How to change CSS with jQuery change and this