Two equal 50% width column full height

Question

I'm trying to create 2 columns, each occupying width of 50%. I need the column height to stretch to the full height of the screen, even when empty, so I can display the backfround color. I tried adding position: absolute but am having mixed results where only one column appears

My HTML

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
}
.wrapper {
  background: green;
  margin: 0;
  padding: 0px;
}

<div class="wrapper">
   <div class="lcolmn">
       <div class="lcontent"></div>
   </div>
   <div class="rcolmn"></div>
</div>

wrapper is your css is targeting classes, not ids as in your html. You should change your html ids to classes — Axnyff, Jan 04 '17 at 21:22
downvoted question and upvoted comments, the downvote only so that you learn the (very basic) difference between styling divs by id and class properly through CSS code (forever!). You can do this many different ways, 100vh is a little bit too modern for my liking, but coolness outweighs any drawback — Jeffrey - Humanized, Jan 04 '17 at 21:28
@Jeffrey-Humanized issue isn't even that the wrapper in his css is targetting classes(even though he should learn the difference). Since he has % on height and there is no content in the divs, it wont show anything. — Kuja, Jan 04 '17 at 21:31
@Jeffrey-Humanized Yeah downvote people for not knowng something. Good going there. Upvoted the question — Ced, Jan 04 '17 at 21:31
vh is currently supported in Safari 10 and above http://caniuse.com/#feat=viewport-units — Tony Scialo, Jan 04 '17 at 21:32
'height: 100%' will work if the container has a set height. Set height of the parent container around .wrapper divs. Set the container to 100vh to get the full effect. — TMKAB121, Jan 04 '17 at 21:34

score 5 · Answer 1 · answered Jan 04 '17 at 21:32

5

Here's the proper solution, without vh and optimized CSS:

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

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

<div class="column" id="lcolumn">
  <div class="lcontect"></div>
</div>
<div class="column" id="rcolumn"></div>

answered Jan 04 '17 at 21:32

good solution @Chris G. Never knew that setting the height 100% would work for child divs as long as you specified the html height to be 100% – Tony Scialo Jan 04 '17 at 21:35
Thanks alot, exactly what I needed – Joseph Jan 04 '17 at 21:38
@Joseph Did you accidentally accept the other answer as best? – Jan 05 '17 at 12:28
I need jquery to adjust the width of lcolumn and rcolumn, give them different width ratios. That would be a problem with your html structure. Your code is right, apart from this issue which is due to me – Joseph Jan 05 '17 at 15:40
@Joseph No it wouldn't. `$("#lcolumn").css("width", "30%"); $("#rcolumn").css("width", "70%");` works fine. Setting IDs will override the `.column` rule. – Jan 05 '17 at 16:02
Actually think your right. am working on the javascript now, will test your code on it. – Joseph Jan 05 '17 at 16:44
@Joseph Did you test it? – Jan 07 '17 at 01:08

score 4 · Accepted Answer · answered Jan 04 '17 at 21:34

4

Here is solution, HTML:

<div id="wrapper">
  <div class="lcolmn">

  </div>
  <div class="rcolmn">

  </div>
</div>

and SASS:

html,
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#wrapper {
  height:100%;
  .lcolmn,
  .rcolmn {
    width: 50%;
    height:100%;
    float:left;
  }
  .lcolmn {
    background-color: red;
  }
  .rcolmn {
    background-color: blue;
  }
}

Here you can check example: https://jsfiddle.net/vladavip88/1cd7rq0f/

answered Jan 04 '17 at 21:34

Goku

241
2
10

Thanks I would use your code. I much simpler as I would be using javascript to adjust the width – Joseph Jan 04 '17 at 21:50

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

The elements inside the wrapper class current have no set height given. Height 100% doesn't work in CSS (see this answer here https://stackoverflow.com/a/4789845/4912604)

What does work thought is the CSS tag "vh" or "view height". Add this to the lcolumn and rcolmn classes

.lcolmn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
  height: 100vh;
}
.rcolmn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
  height: 100vh;
}

Here is a fiddle: https://jsfiddle.net/iamnottony/1jw4e256/

edited May 23 '17 at 12:17

Community

1
1

answered Jan 04 '17 at 21:30

Tony Scialo

5,457
11
35
52

I dont want to use vh due to safari issues – Joseph Jan 04 '17 at 21:32
ahhhh ok, i'll leave this answer just incase some else stumbles across and vh is an acceptable solution for them – Tony Scialo Jan 04 '17 at 21:32

score 0 · Answer 4 · answered Dec 11 '17 at 12:59

Please start to use box-sizing: border-box.
Just set it to *, *::after, *::before. so in css:

*, *::after, *::before {
    box-sizing: border-box;
}

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

.column {
  width: 50%;
  height: 100%;
  float: left
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

Two equal 50% width column full height

4 Answers4