Two 1-pixel wide vertical lines right next to one another

[caga595]

Any idea how to display two decorative 1-pixel wide vertical lines right next to one another?

[ralph.m]

Yes, very easy, but it would help to have some context here. What is your layout and code?

[Paul O'B]

As Ralph said without context its hard to give the right answer.

You could use the borders on two elements to create the lines or you could use :before and :after (ie8+) to place the lines or you could use an image or and so on....

[caga595]

Here's what I ended up doing, but was wondering if there was a better way:

.vertLineLeft {
	border-right:1px solid #CCCCCC;
	height: 25px;
	float:left;
}
.vertLineRight {
	border-right:1px solid #000000;
	height: 25px;
	float:left;
}

[ralph.m]

It would be useful to see the HTML that goes with that, as otherwise it's hard to comment. Presumably the elements they apply to have no width?

[caga595]

It would be useful to see the HTML that goes with that, as otherwise it's hard to comment. Presumably the elements they apply to have no width?

At this point, I'm just reviewing a PSD and haven't started coding the page.

[Paul O'B]

Floating may not be a good idea because that may cause the content to drop in a fluid width. Can't you use the side borders on existing elements?

As Ralph said context is all important as there is no one size that fits all which means the best solution depends specifically on the task in hand.

[caga595]

Floating may not be a good idea because that may cause the content to drop in a fluid width. Can't you use the side borders on existing elements?

As Ralph said context is all important as there is no one size that fits all which means the best solution depends specifically on the task in hand.

Good idea. I'll try that.