Making parent div height of largest childs height

Question

hope you're well.

I'm stuck again, i do try and work these things out before resulting in seeking help, but just a little hurdle im struggling to get my head around...

I cant get the parent div in blue to match the height of the child div, grr, so unsure!

Thanks in advance, you're all great

http://codepen.io/anon/pen/GoGXGa?editors=1100

     <div class="kingcontainer">

       <div class="topbox">

      <div class="title">
           <h3>Frogging Around</h3>
       </div>

      <div class="container">
         <div class="col1">
          <div class="col1text">
            <font color="blue"> University Project </font><br style="line-       height:30px">
            Rationalise three graffiti tags as a corporate or brand logo (part 1)
          </div>
         </div>

        <div class="col2">
          <div class="col2text">
            <font color="blue"> Intentions </font><br style="line-height:30px">
           To have a bit of fun whilst exploring how to get the public    involved in idea generation.
         </div>
       </div>

        <div class="col3">
          <div class="col3text">
           <font color="blue"> Outcome </font><br style="line-height:30px">
           Who would have thought the public had such creativity.
           </div>
     </div>
    </div>
 </div>
 </div>

  div.kingcontainer {
     width: 100%;
    height: auto;
     position: relative;
        background-color: blue;
   }

  div.topbox {
     width: 100%;
     height: auto;
     position: relative;
  }

div.container {
      position: relative;
   max-width: 90%;
   height: auto;
   text-align: left;
   margin-left: 5%;
   font-family: 'Open Sans', sans-serif;
   width: 100%;
   letter-spacing: 0.5px;
 }

 div.col1 {
   width: 33%;
    min-height: auto;
   display: inline-block;
   float: left;
   vertical-align: top;
   background-color: gray;
  }

 div.col2 {
    width: 33%;
    min-height: auto;
    display: inline-block;
    float: left;
    vertical-align: top;
    background-color: gray;
 }

div.col3 {
    width: 34%;
    min-height: auto;
    display: inline-block;
   float: right;
   vertical-align: top;
  background-color: gray;
 }

 div.col1text {
    margin-top: 100px;
   margin-bottom: 100px;
   margin-left: 20px;
    margin-right: 20px;
   color: dimgray;
   display: inline-block;
}

 div.col2text {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 20px;
    margin-right: 20px;
    color: dimgray;
 }

  div.col3text {
    margin-top: 100px;
     margin-bottom: 100px;
     margin-left: 20px;
    margin-right: 20px;
    color: dimgray;
 }

Also, is there a quick way to indent all code by the 4 spaces? I have a sneaky feeling theres a more efficient way than jabbing spacebar four times on each line of code!! cheers

`` has been deprecated and should no longer be used. I'm surprised they're still teaching that, — Paulie_D, Feb 01 '16 at 15:48
blame w3! how come you're not too keen on it? i'm sure i'll learn why when become more experienced! — wezyourboat, Feb 01 '16 at 16:00

score 1 · Answer 1 · answered Feb 01 '16 at 15:46

1

use clear:both after col3 div like that

<div class="col3">
      <div class="col3text">
       <font color="blue"> Outcome </font><br style="line-height:30px">
       Who would have thought the public had such creativity.
       </div>
 </div>
 <div style="clear:both;"></div>  <!-- you need to add that -->

always remember when you're using float after that it's necessary to clear all floating divs

answered Feb 01 '16 at 15:46

Kashif Latif

657
3
15
29

i'm glad to help you :) please mark my answer correct if it helps – Kashif Latif Feb 01 '16 at 16:02

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

When you floats some elements, you need clearing after.

Add to div.container overflow: auto

For reference and specific how it's works: Why does 'overflow: auto' clear floats? And why are clear floats needed?

edited May 23 '17 at 11:59

Community

1
1

answered Feb 01 '16 at 15:53

Germano Plebani

3,461
3
26
38

A1raa · Answer 3 · 2016-02-01T16:01:26.887

-1

Yes to indent you can press "tab". If you want to go back four times without pressing backspace press "shift + tab".

edited Feb 01 '16 at 16:01

answered Feb 01 '16 at 15:47

A1raa

605
1
7
22

thank you for the tab advice. and overflow:auto was more effective, as min-height doesnt work when the page is rescaled. thanks for your input though! – wezyourboat Feb 01 '16 at 15:58
No problem. I've updated my comment to include only the useful information. – A1raa Feb 01 '16 at 16:01

Making parent div height of largest childs height

3 Answers3