0

I'm trying to create a header. I have a parent div container with 3 child divs. Child div 1 is fixed and will be aligned to the left. Child div 3 is fixed and will be aligned to the right. Child div 2 has a variable size and will fit in between Child 1 and Child 3. Child 2 will have a size the changes based on browser size (it will expand and shrink to a certain point).

I want my header to be compatible with older versions of IE, at least back to I.E. version 8. I'm reading about FLEXBOXes and looks like it's not even fully compatible with I.E. 11 without bugs.

I'm thinking about using a table but was wondering if there are better ways to do this...as I briefly tested the table and it's not doing what I want either. I tried it and even though I specified a width for each element, when I shrink my browser, the child 1 and child 3 change in size - NOT what I want.

Thanks!

confused
  • 194
  • 1
  • 13

4 Answers4

2

I'm not too clear on the problem you ran into when attempting to use tables. Could you explain what the problem was?

You can try to use divs and CSS to create the display as a table. This way you can, for example, use feature queries to see if flexbox is available and use it. If not, you can fallback to using the table CSS below. All without changing the HTML.

Let me know if this works for you!

#container{
  display: table;

  /* use table-layout: fixed if you're 
     having problems with the content expanding 
     the fixed cells */
  /* table-layout: fixed; */

  width: 100%; /* or however big you need it */
}

  #row{
    display: table-row;
  }

    #one,
    #two,
    #three{
      display: table-cell;
    }

  #one{
    width: 100px;
    background: blue;
  }
  #two{
    width: auto;
    background: red;
  }
  #three{
    width: 100px;
    background: orange;
  }
<div id="container">
  <div id="row">
    <div id="one">Div 1</div>
    <div id="two">Div 2</div>
    <div id="three">Div 3</div>
  </div>
</div>
heraldo
  • 187
  • 7
  • well when i ran your code, it looks great. i'll try it again, i just deleted my tables lol. – confused Dec 22 '16 at 20:29
  • my child 1 actually is 1 big div with more child divs inside it (all fixed width) so when I tried to resize my browser, it ended up putting one of my those child divs on a row below. – confused Dec 22 '16 at 20:30
  • Could you put your code in a jsfiddle? Could be a couple of problems, but having the actual code would make this a lot easier. For example, did you copy my CSS? The `#row div` will cause problems since it's a loose selector and will select all child divs. It was just for example purposes. It should only target the 3 divs. – heraldo Dec 22 '16 at 20:34
  • i was just about to ask you what the #row div meant haha, i'm working on it right now. not sure what a jsfiddle is but i'll look into it – confused Dec 22 '16 at 20:39
  • @user145190, I edited my answer so that it'll only target the three divs. I've also added an optional rule `table-layout: fixed`. It'll fix the problem of child content expanding the fixed divs. That way, they'll stay at 100px no matter what. – heraldo Dec 22 '16 at 20:42
2

With IE8 you can consider tables, but the old way of doing this is with floats.

#wrapper {
  overflow: hidden; /* Establish BFC */
}
#child1 {
  float: left;
  width: 200px;
  background: yellow;
}
#child3 {
  float: right;
  width: 150px;
  background: pink;
}
#child2 {
  overflow: hidden; /* Establish BFC */
  background: cyan;
}
<div id="wrapper">
  <div id="child1">Child 1</div>
  <div id="child3">Child 3</div>
  <div id="child2">Child 2</div>
</div>

To enforce a single row you can add set max-width percentages to #child1 and #child2 that add up 100%.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • hmm.. that works great too. let me try it with my code and see if it works. i'm using float now right now. What does "Establish BFC" mean i nyour comments? – confused Dec 22 '16 at 20:41
  • @user145190 see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context – G-Cyrillus Dec 22 '16 at 20:43
  • @user145190 Block formatting context roots don't overlap floats and encompass floating descendants. See [Floating elements within a div, floats outside of div. Why?](http://stackoverflow.com/a/32301823/1529630) – Oriol Dec 22 '16 at 20:56
0

Well, flexbox was created specifically to provide a CSS way to do what you describe, so it's a little like asking how to find the area of a square without multiplying...

Prior to flexbox my go-to solution for this sort of problem was to use JavaScript to dynamically resize the appropriate div (the 2nd child in your case). I really disliked this solution even then because I don't think JavaScript is a good place for layout logic to live, but it was the best I could come up with.

I suppose you could use a table, but I think you'll run into quirky limitations on the layout within the "cells" then.

Mark Adelsberger
  • 42,148
  • 4
  • 35
  • 52
  • so i should just create something that doesn't shrink or resize if I want it to be compatible with older versions of IE? – confused Dec 22 '16 at 20:10
  • I can't say what you *should* do. Like I said, the best I ever came up with was JavaScript; I didn't like it but I did use it. Comments on the question suggest that, for this specific case (horizontal layout with 3 parts where the middle is the one that resizes) might be made to work by floating the first and third; that also might be worth trying. – Mark Adelsberger Dec 22 '16 at 20:14
0

Here is one solution, but it has limitations. You have to know the width of Child 3 and position your parent div to relative.

https://jsfiddle.net/whatisthebigpicture/sj9xv9m6/1/

header {
  position: relative;
}
div {
  outline: 1px solid red;
}
.div1 {
  width: 100px;
  float: left;
}
.div2 {
  margin-right: 100px;
}
.div3 {
  width: 100px;
  top: 0;
  right: 0;
  position: absolute;
}
JDavis
  • 3,228
  • 2
  • 22
  • 23