CODEWITHSUNDEEP
htmlcssheightwidth
MichaelJorgensenDK
MichaelJorgensenDK

Reputation: 583

Fixed width, height acording to parent div, and parent div heights acording to content and width rest of sreen?

Take this for an example:

<div id="content">
  <div id="leftDiv" style="background:green;"></div>
  <div id="rightDiv">
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
    <p>Sample content</p>
  </div>
</div>

I want leftDiv to have a fixed width, lets say 100px, right div should then use the rest of the screen as width. I want leftDiv height's to be the same as rightDiv or at least 100% of screen height, and leftDiv's height to align with content.

I've found this code somewhere here on stackoverflow but the first problem with this is that it uses % as width for the div's, the second is that I want min-height to be 100% of screen:

.floatLeft {
  float: left;
}
.child-left,
.child-right {
  width: 50%
}
.child-left {
  background: yellow;
}
.child-right {
  background: none repeat scroll 0 0 green;
  float: right;
  height: 100%;
  position: absolute;
  right: 0;
}
.parent {
  overflow: hidden;
  position: relative;
  width: 100%;
}
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <!--[if IE]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

</head>

<body>
  <div class="parent">
    <div class="child-left floatLeft">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content content content content content content content content content content
    </div>

    <div class="child-right floatLeft">content content content content content content content content content content content content content content content content
    </div>
  </div>
</body>

</html>

I tried playing around with it for many hours and can't figure it out. I can't set child-left to 100px width and child-right width auto, neither can I set a min-height to 100% even through I set *,html,body to 100% height.

Upvotes: 1

Views: 1160

Answers (2)

Safeer Hussain
Safeer Hussain

Reputation: 1340

Hope this is what you're looking..

#content {
  display: table;
  width: 100%;
  min-height: 100%;
  /* remove this line if not necessary */
}
#leftDiv,
#rightDiv {
  display: table-cell;
  min-height: 100%;
}
#leftDiv {
  width: 100px;
  background: green;
}
#rightDiv {
  background: cyan;
}
<html>

<head>

</head>

<body>
  <div id="content">
    <div id="leftDiv"></div>
    <div id="rightDiv">
      <p>Sample content</p>
      <p>Sample content</p>
      <p>Sample content</p>
      <p>Sample content</p>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Rohit Deshmukh
Rohit Deshmukh

Reputation: 391

This should do the trick for you. But make sure your contents are properly wrapped because we are using overflow:hidden. Overflow:hidden clips the contents and doesnt even show a scroll bar for the rest of the contents.

#outer {
  overflow: hidden;
  width: 100%;
}
#left {
  float: left;
  height: 100%;
  background: #fdd;
  width: 100px;
  overflow: auto;
}
#right {
  overflow: hidden;
  height: 100%;
  background: #ddf;
}
<html>

<head>


</head>

<body>
  <div id="outer">
    <div id="left">
      Left Div
    </div>
    <div id="right">
      Right Div
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions