CODEWITHSUNDEEP
htmlpositioning
brunobliss
brunobliss

Reputation: 366

div positioning display block not working

The layout is this, tab-wrapper holds 3 divs inside it, tab-wrapper-top, seperator, tab-wrapper-bottom. I simply want these to stack up, so i'm using display block and with 100% (so they fill the entirety of the tab-wrapper).

why is it 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;
}

http://jsfiddle.net/isherwood/koxjnrLf/

Upvotes: 0

Views: 1397

Answers (2)

Marc Anton Dahmen
Marc Anton Dahmen

Reputation: 1091

you have to clearfix your wrappers

.tab-wrapper-top:after {
    content: "";
    display: table;
    clear: both;
}

and you can remove display: block; for all divs - is the default style anyways

Upvotes: 1

tallrye
tallrye

Reputation: 181

When you use floating element within a div, you need to clear content after it to set div a proper height. ".clearfix" classes are the most common classes for this.

.clearfix:before, .clearfix:after {content:""; display: table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

Here is a JS Fiddle

Hope this helps.

Upvotes: 2

Related Questions