1

I know this might sound like a duplicate but I have checked so many answers and tried so many apparent solutions, none of which have worked, that I thought I'd post my specific (non-working) example. Amongst others, I have tried all of the answers to this question, without success:

How to make a floated div 100% height of its parent?

I am trying (as many people have attempted, before me) to get two left-floated divs occupying the full height of their parent, itself set to 100% height.

<!DOCTYPE html >
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Div height test</title>
    <link href="divstyles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="feedback">
        <div class="feedback-column" id="column1">
            <p>This is column 1</p>
            <p>This is column 1</p>
        </div>
        <div class="feedback-column" id="column2">
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
        </div>
    </div>

</body>

</html>

divstyles.css:

.feedback {
    height: 100%;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}

Amongst many other things, I have tried positioning the outer div relative and absolute and the inner relative and absolute and combinations thereof. I've also tried setting the parent to display: flex; to little effect (the change made the outer div as high as the tallest div, but did not affect the smaller div).

I've had this on a task backlog for a couple weeks now and have intermittently attempted to solve it and given up temporarily. Is there seriously no way to do this? And, if not, does anyone know when this simple, necessary layout will be possible with html and css?

moosefetcher
  • 1,841
  • 2
  • 23
  • 39
  • Why do you need/want to `float` them? – Alex May 17 '18 at 12:52
  • remove the float , height and keep display:table-cell. float kills display and brings some side effects when unfamiliar with its specifities. from there if it is still not te expected result, maybe you need to clarify the question ;) – G-Cyrillus May 17 '18 at 13:53
  • Turns out I just needed to remove the 100% height on the inner divs. I thought I needed to float the divs to have them side-by-side, but it also turns out flex (which I've not used prior to this) sorts that out. Hooray! Something has improved about html and css! Onward to the future! – moosefetcher May 17 '18 at 15:35

3 Answers3

0

If you give your body a fixed height (for example height: 500px), your code should work. This is because both elements that would normally be used to dictate the height of their parent element are not, because they are floating and so have no effect on the height of their parent.

body {
  height: 500px;
}

.feedback {
    height: 100%;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}
<!DOCTYPE html >
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Div height test</title>
    <link href="divstyles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="feedback">
        <div class="feedback-column" id="column1">
            <p>This is column 1</p>
            <p>This is column 1</p>
        </div>
        <div class="feedback-column" id="column2">
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
        </div>
    </div>

</body>

</html>
lewisnewson
  • 410
  • 6
  • 22
  • Great solution if this is literally the only thing on the page, which i'm guessing it probably won't be. – Alex May 17 '18 at 12:56
  • I which case it might be a better idea to wrap ```feedback``` in another div with a fixed height. That way it could be placed anywhere on the page. – lewisnewson May 17 '18 at 12:59
  • A dynamic way of doing this would be @Ryan Gee's answer using flex. – lewisnewson May 17 '18 at 13:02
  • The real-world app is a responsive, scrolling SPA so setting an explicit body height is a no-go. Fixed heights, all-round won't work. But thanks for your answer. – moosefetcher May 17 '18 at 13:25
0

Use height: 100vh; on your .feedback class instead of height: 100%;

.feedback {
    height: 100vh;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}
<div class="feedback">
    <div class="feedback-column" id="column1">
        <p>This is column 1</p>
        <p>This is column 1</p>
    </div>
    <div class="feedback-column" id="column2">
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
    </div>
</div>

Hope this is what you are looking for.

Serge Inácio
  • 1,366
  • 9
  • 22
  • This sets the height of the div to the screen height. For my real-world problem, this won't work as it's a scrolling SPA. Not that I told you that, sorry... But thanks for your answer. – moosefetcher May 17 '18 at 13:23
0
.feedback {
   height: 100%;
   background-color: #333333;
   display: flex;
   align-items: stretch;
}

.feedback-column {
   float: left; /* Why is this needed? */
   display: table-cell; /* Why is this needed? */
   flex-grow: 1;
}

By default, flex-direction is row - so using align-items: stretch should force the smaller div to fill the height of the container.

I'm not really sure why you'd need the float: left; here though, and floated elements are a pain.

Ryan Gee
  • 394
  • 1
  • 9
  • I need the float: left so the divs sit side-by-side, surely. But it looks like the problem has been the 100% height on the inner divs. I take that off and, with just display: flex on the parent, it works. Setting something to 100% height so it's NOT 100% height seems slightly counter-intuitive to me. Html, eh? – moosefetcher May 17 '18 at 13:15