Extending height and width of div box

[vozzek]

Hi all,

 

Let's say I've got the following CSS classes defined:

 

.wrapper{
  width: 100%;
  float:left;
  }
  
.leftside{
  float:left;
  overflow:hidden;
  }
  
.rightside{
  float:left;
  margin-left:5px;
  padding-top:5px;
  border: 1px solid black;
  text-align:center;
  line-height:1.5em;
  overflow:hidden;
  }

 

My html looks like:

<div class="wrapper">
  <div class="leftside" style="width:580px; height:600px;">
     <img src="file.jpg" border="0" />
  </div>
  <div class="rightside" style="width:210px; height:600px; background-color:pink; padding-left:10px; padding-right:10px;">
  This is just<br />
  some sample<br />
  text.<br />
</div>
</div>

 

Right now the pink background of 'rightside' surrounds the printed text, with some padding, and a solid black border around everything.  The black border surrounding the text is a LOT smaller than 210x600px.

 

What I'd like is for the black-bordered pink box (class 'rightside') to extend to the fully defined height and width, instead of just being limited by whatever text I put there.

 

I'm pretty sure the answer to this is simple, but explaining it well enough to get the right answer from a google search has been pretty hard... 

 

Thanks in advance for the help!

[SuperBlue]

Avoid closing the br's and other elements if using html, and make sure to enclose your text in paragraphs.

 

Adding width:100%;height:100%; to any element will make it take up the width and height of its parent.

 

When you add padding and borders to a box, also account for the extra width/height. For instance, adding a 10px padding will add 10 px to the box, according to the W3C box model. That's why many simply avoid padding, and add another smaller wrapper division instead.

 

The W3C box model can quickly become a problem, sure it makes more sense, but it ain't actually practical. You cant tell a browser to subtract 10px from a 50% wide box. So this becomes a problem in percentage based layouts, and that's the reason i recommend using an extra wrapper.

 

Other then that its actually rather unclear what you want, you defined a width and a height for rightside using inline styling, you are saying you that you want it to take up the full width and height of its parent, if i got it right.

 

Well then it just seams unclear why you floated the leftside, since applying width:100%;height:100%; on the rightside would just push it below leftside. And considering the class names, i would assume you would want them to line up horizontally rendering two columns. 

[DamienRoche]

First, you shouldn't need overflow:hidden there.

 

Second, adding height:100%; does absolutely nothing. It's a major flaw with css 2. You have to use faux columns or a div to stretch content....but....

 

..from what I can tell, it *should* be working. The width and height are explicitly defined...

 

in fact, I'm thinking maybe you want something else because I just copied the code into a test page and the rightside is extending to the defined width and height (firefox 2).