Menu icon Foundation
overlaying center aligned divs

I would like to create a unique solution for a div and maintain its responsiveness. I have attached an image to explain it better.

1. The div will contain the title of the page, which can vary from any number of characters.
2. Underneath the title there needs to be a horizontal rule,

I figured two divs:
title div on top
rule div underneath
both divs are full width of the column

I can get it to work flush left but not I am unable to get everything to stay center aligned,

Any suggestions.

Screen shot 2014 09 09 at 8.14.05 pm

overlapping

I would like to create a unique solution for a div and maintain its responsiveness. I have attached an image to explain it better.

1. The div will contain the title of the page, which can vary from any number of characters.
2. Underneath the title there needs to be a horizontal rule,

I figured two divs:
title div on top
rule div underneath
both divs are full width of the column

I can get it to work flush left but not I am unable to get everything to stay center aligned,

Any suggestions.

Screen shot 2014 09 09 at 8.14.05 pm
dims about 5 years ago

try position css property. You will need 3 divs
give positon relative to parent div, and position: absolute to its 2 child divs , one containing the and other the text "THE BLOG"

http://jsfiddle.net/wxouqbnf/

rivet about 5 years ago

thanks dims, this really great,
title length changes the centering, but I might be able to work around.