CODEWITHSUNDEEP
csshtml
Abela
Abela

Reputation: 1233

3 divs side-by-side, full height with header (210x110x*)

I have been beating myself up for way too long to try to figure this out. Time to give up and ask if anybody already has code they can provide me to do what it is I am after.

enter image description here

I do not want or need a footer with this design.

All three columns need to be full height.

Upvotes: 0

Views: 327

Answers (5)

Josh Powell
Josh Powell

Reputation: 6297

Here is how I went about it without the use of a script. May be a better choice to use javascript to achieve the desired height since calc() does not have the best support.

Here is the html:

<header></header>
<div class="leftCont"></div><!--
--><div class="centerCont"></div><!--
--><div class="rightCont"></div>

Here is the css:

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

header {
    width: 100%;
    height: 70px;
    background: brown;
}

.leftCont, .centerCont, .rightCont {
    display: inline-block;
    height: calc(100% - 70px);
}

.leftCont {
    width: 210px;
    background: #2b2b2b;
}

.centerCont {
    width: 110px;
    background: #4b4b4b;
}

.rightCont {
    width: calc(100% - 320px);
    background: tan;
}

Finally, a fiddle: Demo, remove "show" in url to view code.

jQuery solution:

var wH = $(window).height() - 70, // Grabs the window's height and removes 70 pixels(header height)
    wW = $(window).width() - 335; // Same deal but for the width.

$('.leftCont, .centerCont, .rightCont').css({height: wH});
$('.rightCont').css({width: wW});

Fiddle: Demo

Upvotes: 1

Zword
Zword

Reputation: 6787

I am providing a solution which uses a single line jQuery for height measurements to fit display within screen without scrollbars around.Width is adjusted automatically.

HTML

<div id="header">header (full width)</div>
<div id="columns">
    <div class="column red">210 px</div>
    <div class="column green">110 px</div>
    <div class="column grey">Remaining</div>
</div>

CSS

html,body,#header{
    width:100%;
    margin:0px;
    padding:0px;
}
#header{
    background-color:blue;
    height:30px;
}
#columns{
    width:100%;
}
.column{
    display:table-cell;
    height:100%;
}
.red{
    background-color:red;
    min-width:250px;
}
.green{
    background-color:green;
    min-width:110px;
}
.grey{
    background-color:grey;
    width:100%;
}

jQuery

$('.column').height($(window).height()-$('#header').outerHeight());

Fiddle / Watch Fullscreen

Upvotes: 1

user1816910
user1816910

Reputation:

Gotcha.

html

<div class="header">
    Header
</div>
<div class="left1">
    left1
</div>
<div class="left2">
    left2
</div>
<div class="right">
    right
</div>

Css

.header {height:10%; width:100%; background-color:blue;}
.left1 {height:90%; width:210px; background-color:red; float:left;}
.left2 {height:90%; width:110px; background-color:green; float:left;}
.right {height:90%; width:100%; background-color:gray; float:left;}

jQuery

$("document").ready(function(){
    $(".right").css("width", "-=320px");
});

This should put you on the right path. Hope it helps. Oh, and then give them full height. That part should be easy for you.

Upvotes: 0

Cyclonecode
Cyclonecode

Reputation: 30071

I think it would work if you floated only the first two columns and then set the width for the third one to auto (which is the default):

body {
  padding:0;
  margin:0;
}
#header {
  height:40px;
  background-color:blue;
}
#column-1 {
  width:210px;
  height:100%;
  background-color:red;
  float:left;
}
#column-2 {
  width:110px;
  height:100%;
  background-color:green;
  float:left;
}
#column-3 {
  height:100%;
  background-color:gray;
}

<div id="header"></div>
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>

Upvotes: 1

Kitet
Kitet

Reputation: 883

Simple:

<div style="background-color:blue;">HEADER</div>
<div style="background-color:red;width:210px;float:left;">WERWER</div>
<div style="background-color:green;width:110px;float:left;">cvbcvbcvb</div>
<div style="background-color:gray;margin-left:320px;">ASDASD</div>

EDIT:

I forgot about equal height. You need to add style to <body> and add some height to the divs, say, 3000px, so example becomes like this:

<body scroll="no" style="overflow:hidden;">
<div style="background-color:blue;">HEADER</div>
<div style="background-color:red;width:210px;float:left;height:3000px;">WERWER</div>
<div style="background-color:green;width:110px;float:left;height:3000px;">cvbcvbcvb</div>
<div style="background-color:gray;margin-left:320px;height:3000px;">ASDASD</div>
</body>

Upvotes: 0

Related Questions