html - Block Elements Not Vertically Aligning -
html - Block Elements Not Vertically Aligning -
i'm trying develop website. @ moment i'm trying design down, giving me quite tough time.
i have 5 div's. each 1 contains 2 span's, column1 , column2. div's block , span's inline-block. however, reason div's don't want align vertically. help appreciated. also, thing. of span's within div's replaced div's. did because planned on using block elements within of particular areas , , still validate had div's, not span's.
below current code:
class="snippet-code-css lang-css prettyprint-override">.header { color: #aec6cf; font-family: gabriola; font-weight: 900; font-size: 50px; position: relative; } /* id */ #row1 { width: 98%; height: 15%; position: absolute; display: block; } #row2 { width: 98%; height: 2.5%; position: absolute; display: block; } #row3 { width: 98%; height: 70%; position: absolute; display: block; } #row4 { width: 98%; height: 2.5%; position: absolute; display: block; } #row5 { width: 98%; height: 7.25%; position: absolute; display: block; } #column1 { border-bottom: 3px solid black; border-right: 3px solid black; width: 20%; height: 100%; left: 0; position: absolute; display: inline-block; } #column2 { border-bottom: 3px solid black; border-left: 3px solid black; width: 79.8%; height: 100%; right: 0; position: absolute; display: inline-block; } /* misc. */ .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .clearfix { float: clear; margin: 0; padding: 0; } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <head> <meta charset=utf-8> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <title>design</title> </head> <body> <div id="row1"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> <h1 class="header center">generic header</h1> </div> </div> <div id="row2"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> </div> </div> <div id="row3"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row4"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row5"> <div id="column1" class="clearfix" style="border-bottom: 0px;"> </div> <div id="column2" class="clearfix" style="border-bottom: 0px;"> </div> </div> </body> </html>
a couple of issues... there reason why of divs positioned absolutely? without specific margins stack ontop of each other since position: absolute; takes them out of flow of document. relative container, stacked within of container.
secondly, column widths add together on 100%. need business relationship space border takes up.
here code without absolutely positioned divs , adjusted column widths. should on right track.
class="snippet-code-css lang-css prettyprint-override">.header { color: #aec6cf; font-family: gabriola; font-weight: 900; font-size: 50px; position: relative; } /* id */ #row1 { width: 98%; height: 15%; display: block; } #row2 { width: 98%; height: 2.5%; display: block; } #row3 { width: 98%; height: 70%; display: block; } #row4 { width: 98%; height: 2.5%; display: block; } #row5 { width: 98%; height: 7.25%; display: block; } #column1 { border-bottom: 3px solid black; border-right: 3px solid black; width: 20%; height: 100%; left: 0; display: inline-block; } #column2 { border-bottom: 3px solid black; border-left: 3px solid black; width: 73%; height: 100%; right: 0; display: inline-block; } /* misc. */ .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .clearfix { float: clear; margin: 0; padding: 0; } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <head> <meta charset=utf-8> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <title>design</title> </head> <body> <div id="row1"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> <h1 class="header center">generic header</h1> </div> </div> <div id="row2"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> </div> </div> <div id="row3"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row4"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row5"> <div id="column1" class="clearfix" style="border-bottom: 0px;"> </div> <div id="column2" class="clearfix" style="border-bottom: 0px;"> </div> </div> </body> </html>
html block element
Comments
Post a Comment