CODEWITHSUNDEEP
csshtmllayout
deArtish
deArtish

Reputation: 107

How can I achieve this layout using CSS only?

layout

I am trying to build a layout that has two div blocks next to each other. Both of them are centered to the page. The left block (1) varies in width depending on how much space their is available in the window (from 300px min to 400px max). Block 2 has a fixed width of 640px and does not change. Both block's height extend to the bottom of the page. If one block is longer than the other than the other block would compensate with white space (with the background color still applied).

Youtube's video page can be used as an example, however in my case the larger block is on the right. Notice how youtube's right block (suggested videos) gets larger or smaller from 300-400px when the window is resized.

This is the best I can come with:

http://jsfiddle.net/7dL5z/

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

#wrapper {
    max-width:1040px;
    min-width:940px;
    margin:0 auto;  
    height: auto;
    min-height: 100%;
}

#left {
    float:left;
    min-width:300px;
    max-width:400px;
    height:100%;
    background:#EEE;
}

#right {
    float:right;
    width:640px;
    height:100%;
    background:#666;    
}

<html>
  <body>
    <div id="wrapper">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
  </body>
</html>

Two problems:

1) I can't get the divs to extend to the bottom.

2) Adding a float to block 1 renders the min-width property useless

I am looking for a JS and CSS media query free solution if possible.

Any one have a clue?

Upvotes: 0

Views: 172

Answers (5)

Mehdi
Mehdi

Reputation: 4318

If you use jQuery, here is my answer:

$(document).ready(function() {
layoutInit();

$(window).resize(function() {
  layoutInit();
});

function layoutInit() {
    // you can also hard code the max-width and min-width in the javascript,
    // following function is used to remove "px" on "1040px"-like strings from CSS
    var pxStriper = function(str) {
        return str.substr(0, str.length - 2);
    }

    // all parameters you need to update the layout:
    var bodyWidth = $("body").width(),
        bodyHeight = $("body").width(),
        wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
        wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
        rightWidth = pxStriper($("#right").css("width"));

    // 3 different situations with width of the body:
    if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
        // 1:
        $("#wrapper").css('width', bodyWidth);
        $("#left").css('width', bodyWidth - rightWidth);
    } else {
        if (bodyWidth > wrapperMaxWidth) {
            // 2:
            $("#wrapper").css('width', wrapperMaxWidth);
            $("#left").css('width', wrapperMaxWidth - rightWidth);
        } else {
            // 3:
            $("#wrapper").css('width', wrapperMinWidth);
            $("#left").css('width', wrapperMinWidth - rightWidth);                
        }
    }

    // update the height:
    $("#wrapper").height(bodyHeight)
}});

Upvotes: 0

ERose
ERose

Reputation: 189

A few things:

You need to add

html {
height:100%;
}

to get html's sub elements to fit the window. Then remove height:auto from the wrapper.

If you have a max-width set in pixels on the wrapper without telling it a variable width relative to the window (like width:90%), the contents can't change size when the browser resizes, because their width is fixed.

So I added width:90% for demo purposes. You can set it to whatever percentage you think looks nice in the window.

Put your right div before your left in your html like so:

<div id="wrapper">
    <div id="right">right</div>
    <div id="left">left</div>
</div>

and then you can use left to fill the space left by right without having to float it or tell it a width. Setting the max & min width on the wrapper will keep left from getting too small or big.

So the final css would be:

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

#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;  
height: 100%;
width:90%;
}

#left {
overflow:hidden;
height:100%;
background:#EEE;
}

#right {
float:right;
width:640px;
height:100%;
background:#666;    
}

Upvotes: 1

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

My solution is set wrapper to display: table & its childs to display:table-cell.

Both areas will expand bottom when one of them overflow the screen size. If not, both will expand to bottom (100%).

http://jsfiddle.net/7dL5z/4/

HTML:

<body>
    <div id="wrapper">
        <div id="left">
            <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
        </div>
        <div id="right">right</div>
</div>
</body>

CSS:

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

#wrapper {
    display: table;
    height: 100%;
    margin:0 auto;  
    max-width:700px;
    min-width:500px;
    width: 100%;
}

#left {
    background:#EEE;
    display: table-cell;
    max-width: 300px;
    min-width: 100px;
    width: 40%;
}

#right {
    display: table-cell;
    background:#666;    
}

Upvotes: 0

Mihai P.
Mihai P.

Reputation: 9357

Something like this http://jsfiddle.net/pmj7Z/ maybe?

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

#wrapper {
    max-width:1040px;
    min-width:940px;
    margin:0 auto;  
    height: 100%;
}

#left {
    display: block;
    float: left;
    min-width:300px;
    max-width:400px;
    height:100%;
    background:#EEE;
}

#right {
    float: right;
    width:640px;
    height:100%;
    background:#666;    
}

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it using display: table-cell.

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

#wrapper {
    margin:0 auto;  
    height: 100%;
    display: table;
    min-width: 940px;
}

#left {
    display: table-cell;
    height:100%;
    min-width: 300px;
    max-width: 400px;
    background:#EEE;
}

#right {
    display: table-cell;
    width: 640px;
    height: 100%;
    background:#666;    
}

To get the panels to extent to 100% of the browser height, you need to set the height on the html element.

The behavior may be close to what you need.

See demo at: http://jsfiddle.net/audetwebdesign/ZVN97/

Upvotes: 1

Related Questions