html - div positioning display block not working -
the layout this, tab-wrapper holds 3 divs inside it, tab-wrapper-top, seperator, tab-wrapper-bottom. want these stack up, i'm using display block , 100% (so fill entirety of tab-wrapper).
why breaking?
the html
<html> <head> <title>informação pessoal</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/> </head> <body> <div class="tab-wrapper"> <div class="tab-wrapper-top"> <div id="tab-wrapper-top-left"> <div> <label>nome</label> <input type="text" /> </div> <div> <label>grau académico</label> <input type="text" /> </div> <div> <label>profissão</label> <input type="text" /> </div> </div> <div id="tab-wrapper-top-middle"> <div>picture here</div> <span> <label>data de entrada</label> <input type="text"> </span> <span> <label>data de saída</label> <input type="text"> </span> <span> <label>motivo da saída</label> <select></select> </span> </div> <div id="tab-wrapper-top-right"> <div> <span> <label>unidade habitacional</label> <input type="text" /> </span> <span> <label>extensão telefone</label> <input type="text" /> </span> </div> <div> <span> <label>tipo de contrato</label> <select></select> </span> <span> <label>data contrato</label> <input type="text" /> </span> <span> <label>número de cliente</label> <input type="text" /> </span> </div> <div> <label>protocolo</label> <select></select> </div> </div> </div> <div class="separator">separator</div> <div class="tab-wrapper-bottom">bottom wrapper</div> </div> </body> </html> the css
/* tabs */ .tab-wrapper { position: relative; top: 90px; width: 98%; margin: auto; } .tab-wrapper label { margin: 5px 10px 5px; } .tab-wrapper input { margin: 5px 10px 5px; } .tab-wrapper select { margin: 5px 10px 5px; } .tab-wrapper textarea { margin: 5px 10px 5px; width: 90%; } .tab-wrapper-top { display: block; width: 100%; -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75); } .separator { display: block; width: 100%; background-color: red; } .tab-wrapper-bottom { display: block; width: 100%; background-color: red; } #tab-wrapper-top-left { display: block; float: left; width: 40%; } #tab-wrapper-top-left div { display: block; } #tab-wrapper-top-left label { display: inline-block; width: 20%; } #tab-wrapper-top-left input { width: 60%; } #tab-wrapper-top-middle { display: block; float: left; width: 18%; } #tab-wrapper-top-middle div { width: 90%; height: 40%; background-color: red; } #tab-wrapper-top-middle span { display: block; } #tab-wrapper-top-middle label { display: block; } #tab-wrapper-top-right { display: block; float: left; width: 40%; } #tab-wrapper-top-right div { display: block; } #tab-wrapper-top-right span { display: inline-block; } #tab-wrapper-top-right label { display: block; } #tab-wrapper-top-right input { display: inline-block; }
you have clearfix wrappers
.tab-wrapper-top:after { content: ""; display: table; clear: both; } and can remove display: block; divs - default style anyways
Comments
Post a Comment