html - resizable column borders in footer -
i want have footer tree columns, title each , links under each title.and want have border line in middle of space between columns, want space between columns flexible(some%of whole page width columns stay next each other far possible when window resized) note adding 15% padding doesn't work bc text in each column has length not change resize window(in case dont understand mean try test code before answering question!) css:
div.footer{ padding:15px 8%; margin:0px; display:inline-block; } div#footerr{ float:right; } div#footerl{ float:left; } footer{ text-align:center; }
and here html
<footer> <div class="footer" id="footerr"> <h1>توضیحات</h1> </div> <div class="footer" id="footerc"> <h1>اخبار</h1> <h4><a>این خبر اولین خبر در این سایت است</a></h4> </div> <div class="footer" id="footerl"> <h1>پیوند ها</h1> </div> </footer>
btw please mention if can come whole new better way doing this.
so here code
div.footer { padding:15px 8%; margin:0px; display:inline-block; width:33.333%; /*new attribute - make each col have 33% width of browser*/ } div#footerr { float:right; } div#footerl { float:left; } div#footerc { /*new define*/ float:left; /*new attribute*/ position:relative; /*new attribute*/ } div#footerc:before { /*new define*/ content : ""; position: absolute; top: 15%; /*new attribute - can increase or decrease see fit (affect position of line separate top)*/ left: 0; height:75%; /*new attribute - can increase or decrease see fit (affect height of line)*/ border-left: 1px solid #ccc; border-right: 1px solid #ccc; width:100%; } div#footerc, div#footerl, div#footerr { /*new define - attributes make col stay same width no matter padding are*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { text-align:center; width:100%; display:flex; /*new attribute - make cols same height*/ }
hope want! otherwise tell me wrong intend.
update demo
Comments
Post a Comment