CODEWITHSUNDEEP
jqueryhtmlcss
user3417966
user3417966

Reputation: 81

height 100% with multiple columns not working

I want to do something seemingly simple. I want two columns on the page that have a width of 50% each and a height of 100% so they fill the screen completely. I want them side by side so they divide the screen in half. However, no matter what I do for some reason, they refuse to fill the page and float with each other.

I tried getting around it using jQuery but if the window is resized then the columns no longer fill the page. I tried searching around but nothing offers a solution to multiple columns. I've seen this done on many websites and can't figure it out. Is there a way to do it with pure CSS or more efficient jQuery?

http://jsfiddle.net/nFeh8/1/

<div class="container">
    <div class="on"> 
        <button type="button" class="btn-on">
            on
        </button>
    </div>

        <div class="off">
        <button type="button" class="btn-off">
            off
        </button>
    </div>

</div>

.

html {
    height: 100%;
}

container {
    width: 100%;
    height: 100%;
}

.on {
    width: 50%;
   height: 100%; 
    background-color: #FEE;
    float: left; 
}

.off {
    width: 50%;
   height: 100%;
    background-color: #666;
    float: left;       
}

.btn-off {
    position: relative;
}

.

$(document).ready(function() {
    var height = $(window).height();
    $('.on').css({'height':height + 'px'});
    $('.off').css({'height':height + 'px'});
});

Upvotes: 1

Views: 105

Answers (6)

gbanks
gbanks

Reputation: 518

You absolutely do not need jquery or tables (or table display types) for this. Two things:

One: you need to give the body element a height as well. Essentially, everything between your target element and the window (or whatever your target container might be) needs a height.

html, body { height: 100%; }

Two: you want to target the div with the class of "container", not an element named container. Thus add a period:

.container { width: 100%; height: 100%; }

Fiddle: http://jsfiddle.net/nFeh8/7/

Upvotes: 0

Sai
Sai

Reputation: 1949

I am not an experienced programmer, but recently when i had a similar problem, i had to divide width of a wrapping container into 4 blocks. I ran into the same preoblem where the 4th block would slide down below block 1. I had given width:25% in my css. when I changed it to 24% the blocks lined up proper. Its the margin that was throwing the whole thing off so I accounted 1% towards the margin and padding . Hope this is helpful

Upvotes: 0

Robin
Robin

Reputation: 1216

I suggest you use div's styled as a table to realize it. This is the most easy and comprehensible approach. Try it like this:

CSS:

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

.div-table {
    display:table;
    width:100%;
    height:100%;
}

.div-table-row {
    display:table-row;
}

.div-table-cell {
    display:table-cell;
    width:50%;
    height:100%;
}

/* only for showing you the columns */

.div-table-cell:nth-child(1) {
    background-color:red;
}

.div-table-cell:nth-child(2) {
    background-color:green;
}

And HTML:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-cell"></div>
        <div class="div-table-cell"></div>
    </div>
</div>

Working JSFiddle: http://jsfiddle.net/T9BsG/1/

Advantages are: no JS used (keeps Site lean), no float:left; used (leads sometimes to unpredictable results)

Upvotes: 0

effone
effone

Reputation: 2192

With jQuery you can call the same declarations on document ready as well as window resize:

var blockAdj = function () {
    var height = $(window).height();
    $('.on').css({'height':height + 'px'});
    $('.off').css({'height':height + 'px'});
};

$(document).ready(blockAdj);
$(window).resize(blockAdj);

Demo: http://jsfiddle.net/effone/nFeh8/6/

% value with height? << I have a huge doubt about it ...

Upvotes: 1

Joshua
Joshua

Reputation: 138

For both classes the code below will work. the container that sets on the right needs to be and position of absolute so no matter what is on the page it sets exactly where you tell it to. `

 .on{
   position:absolute;
   width: 50%;
   height:100%
 }
 .off{
   position:absolute;
   left:50%;
   height:100%;
 } 
 `

add in any other attributes you want.

Upvotes: 0

Paul Abbott
Paul Abbott

Reputation: 7211

Don't know if this will work for you, but...

.on {
    width: 50%;
    height: 100%; 
    position: absolute;
    bottom: 0;
    background-color: #FEE;
}

.off {
    width: 50%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    background-color: #666;      
}

You don't really even need the container with this.

Upvotes: 0

Related Questions