CODEWITHSUNDEEP
css
Konrad Viltersten
Konrad Viltersten

Reputation: 39068

How to stretch a div vertically and horizontally to occupy all the space?

This is a two part question, I believe, with a third and fourth, bonus twist.

  1. What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?

  2. How can I set the width of the purple so that it goes 100% of the remaining space?

  3. Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?

  4. How can I remove the margin that the green border holds between self and the outer component?

jsfiddle.net/jL8e5/1/

div.faqticleList {
  background: #ffdd00;   /* yellow */
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
}
div.faqticlePreview {
  background: #bb88ff;   /* purple */
  display: inline-block;
  padding: 3px;
  width: auto;
  height: 100%;
}

Upvotes: 2

Views: 8409

Answers (4)

Matt Coughlin
Matt Coughlin

Reputation: 18906

Updated Demo

Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.

CSS

div.faqticleList {
  /* display: inline-block; */
  float: left;
  ...
}
div.faqticlePreview {
  /* display: inline-block; */
  /* width: auto; */
  overflow: hidden;
  ...
}

Upvotes: 2

sbatson5
sbatson5

Reputation: 648

You can use jquery to dynamically find the width.

JS:
 document.getElementById("faqticleList").innerHTML = "faqticleList";
 document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
 var difWidth = $('.container').width() - 212;
 $('#faqticlePreview').css( "width", difWidth )

Then, in your CSS, remove the width from faqticlePreview and float the other div left:

div.faqticleList {
  background: #ffdd00;
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;
  display: inline-block;
  padding: 3px;
  height: 100%;
}

Updated jsfiddle: http://jsfiddle.net/a2Run/

Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212

Upvotes: 0

mawcsco
mawcsco

Reputation: 624

I'm not sure if I completely understand your goals. I assumed:

  1. Fixed width left
  2. Variable width right

http://jsfiddle.net/wXme4/

CSS

body{
    margin: 0;
    padding: 0;
    width: 100%;
}

div.faqticleList {
  background: #ffdd00;
  width: 200px;
  height: 100%;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;

  width: 100%;
  height: 100%;
  margin-left: -203px;
  padding-left: 203px;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100px;
  //overflow: hidden;
  //overflow: auto;
}

div.faqticleList div, div.faqticlePreview div {
    padding: 3px;
}

Script

document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";

Upvotes: 2

Cam
Cam

Reputation: 1902

This will do what you want, but I would recommend you set your height to fixed, or it wont work,

div.faqticleList {
   background: #ffdd00;
   display: inline-block;
   width: 30%;
   height: 150px;
}
div.faqticlePreview {
   background: #bb88ff;
   display: inline-block;
   width: 69%;
   height: 100%;
   clear: both;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100%;
  //overflow: hidden;
  //overflow: auto;
   display: block;
   clear: both;
}

Upvotes: 0

Related Questions