Grow your CSS skills. Land your dream job.

Flexible width line between two elements with CSS?

  • # September 29, 2012 at 12:49 am

    Hey gang. I’m building a site based on a Photoshop mockup, and trying to replicate this:

    ![Screenshot](http://blimpage.com/pants/line-screenshot.png)

    I’m stuck on how to create the line between the title and the button. The problem is that it needs to be flexible, so that it takes up whatever space is left between the title and the button.

    The only solutions I can come up with don’t quite cut the mustard:

    - **Building this section as a table.** I don’t like this because it’s gross and not semantic.

    - **Placing the line as an :after pseudo-element of the heading.** This won’t work because it can’t be flexible.

    - **Making the line a background image of the containing div, and simply covering them up with the foreground elements.** This doesn’t work because the foreground elements aren’t meant to have backgrounds; the background of the page is meant to show through.

    - **Calculating the line’s width with JavaScript** (container width – heading width – button width = line width). That would probably work, but I’d really like a CSS-only solution.

    This seems like flexbox territory, but obviously that’s not an option yet.

    Any thoughts?

    # September 29, 2012 at 2:19 am

    What code do you have already?

    Can you make a reduced case in Codepen or provide a link?

    # September 29, 2012 at 2:56 am

    Ok… I hope I can help… I basically made a index.php page that places the divs for two boxes with some text in them

    Then… I set up some divs for container purposes and of course set a css page up externally so I could move around the content.

    The point of this was so you could take the code and play with the numbers to see how you can move border lines up and down. Once you have it done you can change the colors and make it look pretty. this can also be down with the em tag or %. I like to make the content in boxes and then set the site its self to a em.

    ********************************* HTML****************************************************

    < ?php
    echo ‘ ‘;
    ?>


    ******************************************************** CSS********************************************
    #header{
    width: 100em;
    height: 100px;
    }

    #wrap{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    padding-top: 15px;
    }

    #boxleft{
    width: 300px;
    height: 100px;
    float:left;
    border: solid #000;
    line-height: 20px;

    }

    #line{
    width: 590px;
    background:#313030;
    border-bottom:5px solid #313030;
    margin: 0 auto;
    position: absolute;
    top: 53px;
    left: 500px;

    }

    #boxright{
    width: 300px;
    height: 100px;
    float:right;
    border: solid #000;
    line-height: 20px;

    }

    # September 29, 2012 at 2:58 am

    basically just your the css class line… make a border-bottom and decorate it and position it where you want it inside of a container or wrap.

    This is also how you would make a border to the right or left of the link in a navbar. border-right etc.

    # September 29, 2012 at 3:24 am

    I’ve played with floats and spans but in the absence of flex-box the only way I can figure it is to have the centre section as a div with a background png.

    If the text and links are all floated and expressed as % width and the intervening div is as well, this should work.

    It’s certainly not semantic but it should work. I think you would have to set some min-widths here and there but that shouldn’t be too hard.

    # September 29, 2012 at 4:35 am

    was my explanation not helpful? you can adjust the css with em to change based on page width…

    # September 29, 2012 at 4:47 am

    Sorry nichodiaz, I didn’t really understand your example – it looks like some of your post needs to be wrapped in code tags or something?
    Or could you possibly create an example of this on Codepen?

    # September 29, 2012 at 5:55 am

    maybe im confused.. but it sounds like you want to float an object to the left and float an object to the right and then have a line connect each of these two objects. but you want them to have the relative ability. so you would set the width to em which is the elastic tag. so the line will stretch or shrink.

    I posted the code here as you asked me too…

    http://codepen.io/anon/pen/omEzx

    # September 29, 2012 at 5:58 am

    if you look at the class called line notice i set the width to 60em that basically means it will fill 60 percent. allowing enough room for the boxes i put on both sides to have a 300 pixel width. you can take that code now and play with the numbers and change it to what it needs to be after you implement your text and rss link.

    If I am completely off on what you are asking for I apologize for wasting your time. lol

    # September 29, 2012 at 7:28 am

    Sorry, I don’t think I explained this very well. Maybe a different screenshot will help:

    ![Screenshot](http://blimpage.com/pants/line-screenshot2.png)

    As you can see here, the problem is that the widths of the heading and the button vary from section to section (and this is ultimately being built into a WordPress theme, so they will be editable by an admin). Therefore the width of the line needs to be automatically determined by the browser.

    I’m thinking this currently isn’t a way to do this purely with CSS, but hoping to be proven wrong!

    # September 29, 2012 at 10:47 am

    It can be done with a background gradient. Here’s how I did it, but I had to use a text-shadow to cover it under the text, which isn’t the greatest. I’m sure someone else here can solve it.
    http://codepen.io/anon/pen/mvohI

    I’ve only put the prefixes in for firefox, but it should work everywhere with the others added.

    # September 29, 2012 at 10:53 am

    @cnwtx That’s the best answer I’ve seen. No extra non-semantic elements.

    I wasn’t sure about a gradient because I was under the impression that a body colour might confuse things but there is little (if anything) that couldn’t be tweaked to resolve that.

    # September 29, 2012 at 12:19 pm

    Yeah, but the problem with mine is if the user were to, say, put two spaces together in the title, it might still show the line between them. Oh, and you can’t change the background color of the page without some weirdness, unless you were to change the color in the shadows as well.

    # September 29, 2012 at 12:34 pm

    I just updated it to work without using the shadow, but it uses inline-block instead, which will cause problems on IE7 and below. It still suffers from the problem of changing the background color.

    http://codepen.io/anon/pen/nsgEI

    And here’s one with the background changed to show what that would look like:

    http://codepen.io/anon/pen/btlug

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".