Flexible width line between two elements with CSS?

[blimpage]

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


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?

[Paulie_D]

What code do you have already?

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

[nichodiaz]

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****************************************************

echo ‘‘;
?>

FROM OUR BLOG

‘;

RSS BUTTON

******************************************************** 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;

}

[nichodiaz]

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.

[Paulie_D]

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.

[blimpage]

Here’s a reduced test case (no “line between” has been implemented here):

<http://codepen.io/anon/pen/naFxl>

As you can see, the widths of both the heading and the link vary in width throughout different sections, so the line between them needs to be flexible.

[nichodiaz]

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

[blimpage]

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?

[nichodiaz]

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

[nichodiaz]

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

[blimpage]

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


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!

[Paulie_D]

@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.

[wolfcry911]

http://codepen.io/anon/pen/rkDai
just another variation using a section border.

[blimpage]

Cheers guys, some nice solutions! Looks like my ideal solution doesn’t exist yet, but one of these should cut it in the meantime.

[blimpage]

Hey, this is rad! I wouldn’t have even thought of using calc(). I’ll play around with this a bit.

[Author]

Posts