css - Mixing floating and absolute positioning issues -


i'm trying float 3 elements, no problem there. in 2 outside boxes need position element vertically in center, thought wrap them both in div, float wrapping divs , absolute position elements inside them , set wrapping elements position: relative; wouldn't mess layout , 3 elements stay floated correctly.

however doesn't seem have happened way, middle element still seems shoved way left.

my css:

.line_wrap {     float: left;     position: relative;     width: 366px;     min-width: 366px;     max-width: 366px;     }  .line_wrap .line {     position: absolute;     top: 25px;     left: 0;     width: 366px;     min-width: 366px;     max-width: 366px;     border-top: 1px solid #d9dce6; }  .title {     float: left; }  .title h2 {     font-weight: 300;     font-size: 37px;     color: #425080; } 

my html:

<div class="fee_header">     <div class="line_wrap">         <div class="line"></div>     </div>     <div class="title">         <h2>standard fees</h2>     </div>     <div class="line_wrap">         <div class="line"></div>     </div>     <div class="contentclear"></div> </div> 

fiddle: http://jsfiddle.net/mn88r/

i'm trying position 2 elements on sides border of them ends in vertical center of text in middle.

if understand trying achieve correctly, think may approaching wrong angle , perhaps should try other using 3 floating boxes.

if goal have title center it's parent container, , border run across vertical center of heading text, try more this:

css

.title {     height:20px;     overflow:visible;     border-bottom:1px solid #d9dce6;     margin-bottom:20px;  }  .title h2 {     font-weight: 300;     font-size: 37px;     color: #425080;     text-align:center; } 

html

       <div class="fee_header">            <div class="title">                <h2>standard fees</h2>            </div>         </div> 

here link new fiddle: http://jsfiddle.net/2kdq4/1/

just make sure font-size of heading , container div height in proportions meet needs. , bottom-margin on title set ever spacing need.


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -