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

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -