How can I create a line after my text to the width of the container?


Tags: css,class,html,underline

Problem :

Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.

Something like this:

This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container

I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.

Here's what I've tried:

CSS:

.line
{
    display:inline-block;
    border-bottom:2px #5B3400 solid;
    margin-left:5px;
    width:80%;
}

HTML:

    <h2>Our Mission<span class="line"></span></h2>

Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?

I know this should be easy but I haven't been able to find a solution yet.

Thanks!



Solution :

THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):

You can try using this method instead, if your <h2> is on top of a background image.

HTML:

<h2 class="line-title"><span>This is my title</span><hr /></h2>

CSS:

.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}

See the working example here: http://jsfiddle.net/yYBDD/1/

How it Works:

  1. the <h2> tag acts as a container for a floated element.

  2. the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.

  3. the <hr /> acts as the line, and fills up the remaining space to the right.


    CSS Howto..

    CSS Transition not showing with directive

    How to have a hidable paragraph in an HTML email template

    How to stop jquery from overriding CSS color?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How to display two images on the same line (CSS)

    How do I get my List Items to move up a Little in CSS

    How do I make current menu item active in asp.net webforms

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    How to selectively pass mouse events to underlying svg elements

    how to use static folder in django for css and javascript?

    How to php echo content into
    classes dynamicaly [closed]

    How to remove the border that show after clicking a picture

    How can I change the colour of individual squares on this grid…?

    How to make hidden div slide down without affecting other elements in same row

    CSS hover - How do I get it to change two nested divs

    How to display block from left to right in css

    How to properly align rows with bootstrap

    How to control child div height of a flex item

    How to remove extra space after a colon in CSS with Sublime Text 2?

    How to change img style inside span in CSS?

    How can I get my menu/logo to be centered instead of all the way to the right?

    How to reference a long class name with spaces in CSS?

    How to start with responsive deisgn [closed]

    How to get width of div using jquery

    how to display image on mouse over by css

    HTML/CSS How to connect a list to h tag and word-spacing

    Bootstrap - How to ensure white space on far left and far right on mobile

    How do I set up the Zurb Foundation icons?

    How to change a span to look like a pre with CSS?