Question

I am working on my website and I need to make some css that allows me to hav a div sticking out of the side of my main content div which aligns itself with a p element and resizes to fit to produce a result like this:
https://i.stack.imgur.com/wCYi6.png
can this be done using only css if i want one class to make a lot of the blue divs in the image?

EDIT: i think i wasn’t clear when asking this. i need something that gets the height and vertical position of the paragraph and feeds it into the div

Answer 1

It’s a problem in CSS, but you can achieve what you are looking for using faux columns.

Here is a simple demo:

.wrap { background:lightblue url(image-width-of-column.png) right repeat-y; min-height:100px; overflow:hidden; width:800px;}
p { width:600px; float:left; }
.sidebar{ float:right; width:200px; }