css - How to stretch the background color of a child element so that it has the same height as the parent element while using float? -

-

please java guy simple css problem. been trying hours , can't find proper solution problem: how stretch background color of child element has same height parent element while using float? bet has display:flex, can't work :-/

here's code: https://jsfiddle.net/bycor29w/

goal: right column background colour must filled same height middle column no matter how or little text contains

requirement: must use float

stackoverflow demands: "links jsfiddle.net must accompanied code", here go: 

<!doctype html> <html> <head lang="en">     <meta charset="utf-8">     <title></title> </head> <body> <style>     div {         border: 1px #000 solid;     }      .container {         height: 100%;         width:980px;         float:left;         display: flex;     }      .left {         width: 200px;         float: left;     }      .mid{         padding-top: 1px;         width: 560px;         float: left;     }      .right {         background: #d8d8d8 repeat-y bottom right;         padding: 0 20px;         height:100%;         align-self: center;         flex: 1;         width: 180px;         float: left;     } </style>  <div class="container">     <div class="left">         asdf<br>         asdf<br>         asdf<br>     </div>     <div class="mid">         asdf<br>         asdf<br>         asdf<br>         asdf<br>         asdf<br>         asdf<br>     </div>     <div class="right">         asdf     </div> </div>  </body> </html>

firstly, flexbox override floats...if want use floats...don't use flexbox.

what seem want can achieved using css tables....you can still use floats if absolutely necessary.

* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  div {    border: 1px #000 solid;  }  .container {    width: 580px;    display: table;    overflow: auto;    vertical-align: top;  }  .left {    width: 100px;    float: left;    display: table-cell;    vertical-align: top;  }  .mid {    padding-top: 1px;    width: 370px;    float: left;    display: table-cell;    vertical-align: top;  }  .right {    background: lightblue;    width: 100px;    display: table-cell;    vertical-align: top;  }
<body>    <div class="container">      <div class="left">        asdf        <br>asdf        <br>asdf        <br>      </div>      <div class="mid">        asdf        <br>asdf        <br>asdf        <br>asdf        <br>asdf        <br>asdf        <br>      </div>      <div class="right">        asdf      </div>    </div>    </body>


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more