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
Post a Comment