CODEWITHSUNDEEP
csshtml
user1130772
user1130772

Reputation: 437

getting a div to resize to the height of a <p> element

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.sstatic.net/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

Upvotes: 1

Views: 1479

Answers (2)

The Who
The Who

Reputation: 6622

You can accomplish this with absolute positioning in CSS.

http://jsfiddle.net/ya6Eq/

The trick is to use top:0px and bottom:0px for the marginal element.

CSS

.y {
 position: relative;
 background: #0F0;
 margin-bottom: 10px;
}

.y .x {
  background: #F00;
  position: absolute;
  top:0px;
  bottom: 0px;
  right: 0px;
  width: 80px;
}
​

HTML

<!DOCTYPE html>
<html>
  <body>
      <div class='y'>
          <p>
              I am <br>
              two lines tall
          </p>
          <div class='x'>marginal</div>
      </div>
      <div class='y'>
          <p>
              I am <br>
              three lines<br>
              tall<br>
          </p>
          <div class='x'>marginal</div>
      </div>
  </body>
</html>​

Upvotes: 0

bookcasey
bookcasey

Reputation: 40473

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

Upvotes: 1

Related Questions