CODEWITHSUNDEEP
cssfluid-layoutliquid-layout
Alga
Alga

Reputation: 173

Liquid Layouts: 3 column - Fixed Fluid Fluid with px margins

This is driving me nuts! I'm trying to do a liquid layout that has a left fixed width (130px), a middle fluid column and a right fluid column, all of them with 20px margins.

Because I only want the right column to scroll when the content overflows, I've put left and middle inside a fixed positioned container .wrapper (which takes 50% of the page) and the other 50% for the right hand column. I've made the margins as borders with box-sizing.

But when I resize the browser, the middle column resizes until in disappears and the text on the left and middle column overflows.

Any ideas?

<head>


<style>


html, body {
height: 100%;
padding: 0;
margin:0;
}



html {
background-color: #555;
}


.wrapper {
padding:0;
margin: 0 20px 0 0;
position:fixed;
width:50%;
background:blue;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border:20px solid white;
}

.middle {

background:yellow;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border-left:150px solid white;
margin:0;
padding:0;

}




.right {
float: right;
width:50%;
height:100%;
background:pink;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border-right:20px solid white;
border-top:20px solid white;
border-bottom:20px solid white;
}





.left {
float:left;
width:130px;
background:green;
height:100%;
margin-right:20px;
}

</style>
</head>

<body>
<div class="wrapper">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

</div>

<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>





</body>

I've also done this on jquery, but I seem to be running into the same resizing problems. Can anyone shed some light on this issue? Many thanks! 

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>



<style>
html, body {width:100%;margin:0; padding:0;}

html {  overflow-y: scroll;}




.middle {
position:fixed;
background:yellow;
left:170px;
top:20px;
margin-right:20px;
}

.left {
position:fixed;
left:20px;
top:20px;
background:blue;
width:130px;
margin-right:20px;
}

.right {
float:right;
margin: 20px 20px 20px 0px;
background:blue;
width:50%;
}



</style>
</head>
<body>


<div class="left">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
<div class="middle">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>


<div class="right"></div>



<script>

$(document).ready(function () { /* standard jQuery document ready */
$('.left').css('height', '100%').css('height', '-=40px');
$('.middle').css('width', '50%').css('width', '-=170px');
$('.middle').css('height', '100%').css('height', '-=40px');
$('.right').css('height', '100%').css('height', '-=40px');
$('.right').css('width', '50%').css('width', '-=40px');

});



$(window).on('resize', function(){


$('.left').css('height', '100%').css('height', '-=40px');
$('.middle').css('width', '50%').css('width', '-=170px');
$('.middle').css('height', '100%').css('height', '-=40px');
$('.right').css('height', '100%').css('height', '-=40px');
$('.right').css('width', '50%').css('width', '-=40px');

});





</script> 

</body>

Upvotes: 0

Views: 566

Answers (2)

DreamTeK
DreamTeK

Reputation: 34307

LIQUID LAYOUTS NO PROBLEM

If you provide additional requirements I can easily tweak the code below to accommodate.

HTML

<div class="Lft">
  LEFT CONTENT
</div>
<div class="RgtContent">
  <div class="Mid">
    MID CONTENT
  </div>
  <div class="Rgt">
    RIGHT CONTENT
  </div>
</div>

CSS

.Lft{
    height:100%;
    background:#b00;
    position:fixed;
    width:130px;
}
.RgtContent{        
    width:100%;
    margin-left:130px;
}
.Mid{
    float:left;
    height:100%;
    background:#0b0;
    width:50%; 
}
.Rgt{
    float:left;
    height:100%;
    background:#00b;
    width:50%;
}

http://jsfiddle.net/7nQMx/

EXAMPLE WITH PADDING / MARGINS

Margins are not part of the box-sizing model, however a wrapper with padding around the desired div with margins has the same effect.

http://jsfiddle.net/7nQMx/1/

HTML

<div class="Lft">
LEFT CONTENT
</div>
<div class="RgtContent">
  <div class="RightWrapper">
    <div class="Mid">
      MID CONTENT
    </div>
    <div class="Rgt">
      RIGHT CONTENT
    </div>
    </div>
</div>

CSS

.Lft{
    height:100%;
    background:#b00;
    position:fixed;
    width:130px;
}
.RightWrapper{
   margin-left:130px; 
}
.RgtContent{    
    width:100%;
    padding:20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.Mid{
    float:left;
    height:100%;
    background:#0b0;
    width:50%; 
}
.Rgt{
    float:left;
    height:100%;
    background:#00b;
    width:50%;
}

To have the right column scroll simply set a height and overflow property:

.Rgt{
    height:500px;
    overflow-y:scroll;
}

http://jsfiddle.net/7nQMx/3/

Upvotes: 1

Maloke
Maloke

Reputation: 224

I think this could be a start for you:

http://jsfiddle.net/S4mxM/

<div class="left">
    Lorem ipsum dolor sit amet...
</div>

<div class="wrapper">
    <div class="middle">
                Lorem ipsum dolor sit amet...
    </div>

    <div class="right">
                    Lorem ipsum dolor sit amet...
    </div>
</div>

CSS

html, body {
padding: 0;
margin:0;
}

html {
background-color: #555;
}
.left, .middle, .right, .wrapper {
    height: 100%;
}
.wrapper {
    background: blue;
    margin-left: 150px
    width: auto;
}
.left {
    background: green;
    float: left;
    width: 130px;
}
.middle, .right {
    width: 50%;
    float: left;
}
.middle {
    background: yellow;
}
.right {
    background: pink;
}

I rewrote the whole code

Upvotes: 0

Related Questions