0

I have another question about css auto sizing content. I have three divs next to eachother that all need to be the same lenght, but that length is set by the longest div, and not permanent. I have tried to do something similar to the answer in this ( How to make a div's width stretch between two divs ) question I asked a little bit ago, but had no success getting it to set the height of the divs.

The three divs are set widths.

HTML:

<div id="content">
    <div id="bodySideBar">
        a
        <br><br><br>
        b
    </div>
    <div id="bodyUpdateBar">
        a
        <br><br><br><br><br><br><br><br><br>
        b
    </div>
    <div id="bodyContent">
        a
        <br><br><br><br><br><br>
        b
    </div>
</div>

CSS:

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: inline;
}

#bodyContent {
    display: block;
    float: none;
    width: auto;
    height: 100%;
    background: #FFC273;
}

#bodySideBar {
    display: inline-block;
    float: left;
    width: 50px;
    height: 100%;
    background: #BF8130;
}

#bodyUpdateBar {
    display: inline-block;
    float: right;
    width: 200px;
    background: #FFCA40;
}

JSFIDDLE: http://jsfiddle.net/ueXR9/

NOTE: I put the
s in to show that the other parts are not being forced to resize to the longest div. Also, sorry if there is anything you don't understand, as I am running off of less than 5 hours of sleep and can't concentrate half the time.

Community
  • 1
  • 1
Burn_E99
  • 1,098
  • 1
  • 17
  • 27

1 Answers1

0

Maybe its possible with display: table.

http://jsfiddle.net/ueXR9/1/

CSS:

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: table;
}
#bodyContent {
    display: table-cell;
    float: none;
    width: auto;
    height: 100%;
    background: #FFC273;
}
#bodySideBar {
    display: table-cell;
    width: 50px;
    height: 100%;
    background: #BF8130;
}
#bodyUpdateBar {
    display: table-cell;
    width: 200px;
    background: #FFCA40;
}

HTML:

<div id="content">
    <div id="bodySideBar">a
        <br>
        <br>
        <br>b</div>
    <div id="bodyUpdateBar">a
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>b</div>
    <div id="bodyContent">a
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>b</div>
</div>
Marcel
  • 375
  • 1
  • 8
  • I just looked at the attached JSfiddle, and it seems to break the format I had set up, where the spacing looked like the result in my jsfiddle (found here: http://jsfiddle.net/ueXR9/). I need the positioning of the divs to look the same as what they are in my jsfiddle. – Burn_E99 Feb 19 '14 at 21:45
  • I got it to work. I had to rearrange the divs to get the correct locations and spacing for them. Thanks! – Burn_E99 Feb 22 '14 at 02:52