CODEWITHSUNDEEP
htmlcss
AdrianL
AdrianL

Reputation: 335

Divs are not on the same height

I'm trying to get a page that has three <div>'s that should be next to each other and at the bottom of the page it should show a fourth <div>. All of that should be visible without scrolling, why I'm using 100vh and 100vw to just use the viewfield. but it puts all three <divs> on different heights.

It's going to be a HbbTV App, that's why it is important to be fullscreen.

html,body { margin:0; padding: 0; }
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}
#colorpanel {
  width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}
.b_footer {
  padding: 10px;
  height: 200px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
.colorbuttons {
    background-color: #0000ff;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	width: 30%;
	margin: 10px;
	
}
<?xml version="1.0" encoding="UTF-8" ?>
<!--As DOCTYPE either the strict XHTML declaration or "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd" shall be used as described in the HbbTV-standard: A.2.6.2.-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Required XML-namespace as described in the HbbTV-standard: A.2.6.2.-->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>	<!--Required MIME content type as described in the HbbTV-standard: A.2.6.2.-->
<meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />
<!--script type="text/javascript" src="hueapi.js"/-->
<link rel="stylesheet" href="DemoHbbtvHue.css"/>
<title>Demo for HbbTV and Hue</title>
</head>

<body>

<div id="inputpanel">
  
Step1: Enter IP or use DummySystem.
<button type="button" id="dummy" onclick="enteringDummySystem()">DummySystem</button><br />
<br />
NOTE: Please press the button on your Hue-Bridge before clicking on "Search"<br />
IP: <input type="text" id="inIP" />
<button type="button" id="buIP" onclick="searchDevices('Lamp', 'Hue', document.getElementById('inIP').value)">Search</button><br />
<button type="button" id="getIds" onclick="getId()">Get Light IDs</button>
<button type="button" id="createBut" onclick="createButton(function(){
        alert('it works');})">create Button</button>

</div>

<div id="selectpanel">
gfsd

</div>

<div id="colorpanel">

<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor(0.1684,0.0416)">Blue</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor(0.6549,0.3126)">Red</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">White</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Green</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorWhite" onclick="setColor()">Yellow</button><br />
<button type="button" class="colorbuttons" id="buttonSetColorRed" onclick="setColor()">Pink</button><br />

</div>

<div class="b_footer">
	This demo provides the possibility to control Philips Hue lamps via a HbbTV-Application.
</div>

</body>

</html>

What could I change to achieve what I'm looking for?

Upvotes: 0

Views: 191

Answers (2)

Kelley Rose
Kelley Rose

Reputation: 132

If all you are looking to do is get all elements in the viewport without any scrolling (and get the top three divs the same height), you can add overflow: hidden; to #inputpanel,#selectpanel,#colorpanel styles. This does push the content on the first two divs to the top of that element though.

However, I would recommend using Flexbox to solve for a number of positioning issues you may encounter if that is a possibility.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is a starting point if you were to go the Flexbox route:

First, you will need to wrap you top three div's in another div. Something like <div class="top-container"> - see styles added to top-container below.

html,body { 
  margin:0; 
  padding: 0; 
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: calc(100vh - 200px);
}
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}
#colorpanel {
  width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.b_footer {
  padding: 10px;
  height: 200px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
.colorbuttons {
  background-color: #0000ff;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 30%;
  margin: 10px;
}

Upvotes: 1

Roland Ruul
Roland Ruul

Reputation: 1242

You could use floats and add width of 100% to footer:

#inputpanel,#selectpanel,#colorpanel {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    height: calc(100vh - 200px);
    margin: 0;
    padding: 0;
}

.b_footer {
    float: left;
    padding: 10px;
    height: 200px;
    width: 100%;
    background-color: blue;
    text-align: center;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}

JFiddle example here.

Upvotes: 0

Related Questions