Fixed left, 100% with fluid right

HTML & CSS
1

HI, im going a bit mad…

html
`

`

CSS
html, body{ height: 100%; width: 100%; }.content { height: 100%; position: relative; } .cleft { position:fixed; top:0; left:0; width:235px; height:100%; background:#090909; } .mainpan{ margin-left:255px;width:auto; background:yellow; min-height:100%; }

Im trying to get the .mainpad to stretch the browser. When any child divs of .mainpad with margin or padding are added i get horizontal scroll bars…is there a better way to do this?

Thanks in advance

2

Hi there barney0o0,

does this help…

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
html, body{
    height:100%;
    width:100%;
    margin:0;
 }
.content {
    height:100%;
    position:relative;
 }
.cleft {
    position:fixed;
    top:0;
    left:0;
    width:235px;
    height:100%;
    background:#090909;
 }
.mainpan{
    margin-left:255px;
    background:yellow;
    min-height:100%;
    padding:4%;
    box-sizing:border-box;
 }
</style>

</head>
<body>

<div class="content">
 <div class="cleft"></div>
 <div class="mainpan">
  <h2>box-sizing and padding added.</h2>
 </div>
</div>

</body>
</html>

coothead

3

ah, box-sizing…ive done this before but completely forgot to use it :smile:
Many thanks

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.