Stretching and resizing html objects to fit?
I'm making a page which is meant to show 4 objects at the same time. These objects will be streaming live video, and are assigned dynamically upon clicking items in the main menu. What I need is help for automatically resizing everything on the page to stretch to fit as much as possible without scrolling.
The black box is the page. The title box at the top is always the same height and the box on the left is always the same width. The green boxes however need to automatically resize to fit as much as possible and all 4 be the same size. There shall be no scroll bars anywhere, except in the main menu.
On top of that, when the content boxes resize, the objects also need to resize. I've seen issues in IE where an object at "100%" width doesn't work right.
How do I structure this page to do so? I'm still fairly new to HTML and don't know how to set it up to resize. Here's the code that I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
function pageload() {
//dynamically load main menu
}
function camload(addr) {
var i = document.getElementById("selPosition").selectedIndex + 1;
var h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="100%" height="100%" id="vlc" events="True">';
h += '<param name="Src" value="'+addr+'" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="100%" height="100%"';
h += ' target="' + addr + '" ></embed></OBJECT>';
document.getElementById('divContent' + i).innerHTML = h;
}
</script>
<style type="text/css">
body
{
position: relative;
float: left;
width: 100%;
height: 100%;
}
h1
{
margin: 0px;
border: 0px;
padding: 0px;
}
div.title
{
position: relative;
float: left;
width: 100%;
height: 40px;
overflow: hidden;
}
div.main
{
position: relative;
float: left;
width: 100%; height: 100%;
}
div.contentmain
{
position: relative;
float: left;
width: 1000px;
height: 100%;
}
div.contentbox
{
position: relative;
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div style="width: 250px; height: 600px; position: relative; float: left;">
<div>
<select id="selPosition" name="selPosition">
<option>Top Left</option>
<option>Top Right</option>
<option>Bottom Left</option>
<option>Bottom Right</option>
</select>
</div>
<div>
<ul>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.1')">Item l 1</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
</ul>
</div>
</div>
<div class="contentmain">
<div style="position: relative; float: left; width: 100%; height: 50%;">
<div class="contentbox" id="divContent1">
<br />
</div>
<div class="contentbox" id="divContent2">
<br />
</div>
</div>
<div style="position: relative; float: left; width: 100%; height: 50%;">
<div class="contentbox" id="divContent3">
<br />
</div>
<div class="contentbox" id="divContent4">
<br />
</div>
</div>
</div>
</div>
</body>
</html>
UPDATE
After trying Ana's answer of using display: table; I got it to show better, but it's still now filling in all the space. The page also depends on the main div being 800 px in height, and I need this to be 100% - which I can't figure out how to do because of the title div, and same problem with the width due to the main menu. So how do I A) make sure the page stretches properly with no scroll bars, and B) how to fill in each box with their content?
[PS - there will be an image not found in this new code, and it's now 3x3 instead of 2x2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "White";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" id="player'+selIndex+'" events="True">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no"';
h += ' target="' + addr + '" ></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
position: absolute;
padding: 10px;
width: 100%;
height: 100%;
}
h1
{
margin: 0px;
border: 0px;
padding: 0px;
}
h3
{
margin: 0px;
border: 0px;
padding: 0px;
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
overflow: hidden;
}
div.main
{
position: relative;
height: 800px;
}
div.contentmain
{
height: 100%;
overflow: hidden;
position: relative;
}
div.side
{
width: 250px;
height: 100%;
float: left;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
width: 100%;
height: 33%;
}
div.contentbox
{
display: table-cell;
width: 33%;
height: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<ul>
<li><a href="javascript:" onclick="camload('')">[ NONE ]</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 1</a></li>
<li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
</ul>
</div>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
This is how it is looking now, and I drew lines where it needs to move...
Use position: absolute; on the green boxes and put them directly into contentmain. And then position them like this:
#divContent1 {top:0;left:0;bottom:50%;right:50%}
#divContent2 {top:50%;left:0;bottom:100%;right:50%}
#divContent3 {top:0;left:50%;bottom:50%;right:100%}
#divContent4 {top:50%;left:50%;bottom:100%;right:100%}
Also, don't use float:left; on objects that have width: 100%;. Even better, don't even set width:100%; on block elements - block elements naturally expand to fill their parent horizontally. Don't set position: relative on everything. Leave them with the default (position: static) and only set position: relative when you need it. Like on the parent of some elements that you want to have absolutely positioned - you might want to read this http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Or another version: using display: table; - demo http://dabblet.com/gist/2815688
- Is it possible to pull css values with HTA javascript?
- How to secure my login page
- pixel.gif, why do people use it?
- apple-mobile-web-app-status-bar-style in ios 10
- Using margin:auto to vertically-align <div>
- Contact Form Submit Button link to Email
- Generate random image by url
- Cross-reference (named anchor) in markdown
- Unable to make text bold in SVG
- Is there a way to create your own html tag in HTML5?
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- font size is not working when using from html
- Using custom HTML Tags
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Can I add a custom attribute to an HTML tag?
- Why is my Bootstrap table overflowing the containing card?
- Why are level 1 headings the same size as other headings?
- WAI-ARIA Roles for Carousels (a.k.a. sliders, slideshows, galleries)
- What is the difference between localStorage, sessionStorage, session and cookies?
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- React ${} string replacer doesn't work
- Favicon not working
- Formatting a nested table in HTML