Empty Div Needs to be 100% of parent

4 Views

I’m having a bit of a frustrating issue…I thought I found a few answers here but nothing as of yet seems to be working.

Here is an image to start off with:

Read More

http://www.shaunmbaer.com/wordpress/wp-content/uploads/2013/02/Melissliss_01.jpg

Then here is the html: 

<section class="A">
  <aside class="B"></div>
  <header class="C">Title</header>
  <article class="D">Lorem ipsum...</article>
</section>

And the css as of now: 

A{width:100%}
B{width:220px; height:100%; float: right; background= #fff url("foo") repeat}
C{width:450px}
D{width:450px}

I am using wordpress (this bit is a post), so all of the content is automatically generated. I need div “B” to be 100% of the parent div. It does not have any content besides a repeating background image (the site is responsive and this div will disappear at the next breakpoint).

I cannot position them absolute since I cannot give the article (“D”) a fixed height (at least I think that statement is correct…)

Can anyone help or point me to somewhere that can? Preferably a CSS solution, but jQuery is a-ok at this point too!

Thanks a ton2.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. I’m pretty sure you can use absolute positioning for the B element, and specify 3 sides for the element to stick to:

    .A {
    position: relative;
}

.B {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 220px;
}