How is better to create frames in css than html? - html

Question

I am new to css and want to know how is it better to create frames in css than html frames? For learning I want to create a screen with 2 equal sized frames, with the first frame divided into 2 columns. Can someone please guide me how do I start with it?

Answer 1

You can simulate frames by using div tags and the overflow CSS attribute.
Demo: http://jsfiddle.net/wdm954/wPywB/
HTML...
<div id="a">
<div class="col1">testing col1</div>
<div class="col2">testing col2</div>
</div>
<div id="b">
Test test test.
</div>
CSS...
#a, #b {
width: 50%;
height: 400px;
float: left;
overflow-y: scroll;
}
#a .col1, #a .col2 {
width: 50%;
float: left;
}
Optionally you can using some jQuery to dynamically set the height of the frame-like columns...
$(document).ready(function() {
$('#a, #b').height( $(window).height() );
$(window).resize(function() {
$('#a, #b').height( $(window).height() );
});
});

Answer 2

Got an example done for you. Just add the 'frame' class to a div and it will look like a frame. Works fine in IE5.5+ and Safari 5 (browsers that I tested).
Also added a 'border' class to simulate a frame 'drag' bar. But you probably want something more stylish. :P
Click here for an example.
CSS:
* {
margin:0;
padding:0
}
html, body {
overflow:hidden;
width:100%;
height:100%
}
body {
background:lightgrey
}
.frame {
float:left;
width:49.5%;
height:100%;
overflow:auto
}
.frame .frame {
background:cyan
}
.frame.border {
border-right:3px ridge buttonface
}
HTML:
<div class="frame">
<div class="frame border">
<p>Left column</p>
</div>
<div class="frame">
<p>Right column</p>
</div>
</div>
<div class="frame">
<p>Right frame</p>
</div>

Answer 3

Many Thanks Guys!!! This is how I did:
CSS
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 320px;
overflow: auto;
}
#maincontent{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 130px;
overflow: hidden;
background: #fff;
}
.innermargin{
margin: 15px;
}
HTML
<div id="framecontent">
<div class="innermargin">
<h4>Search Result</h4>
</div>
</div>
<div id="maincontent">
<div class="innermargin">
<h4>Search Criteria</h4>
</div>
</div>

Answer 4

you can use the Javascript frame library.
don't forget to declare charset as Utf-8 in your head section:
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<div id="thewin"></div>
<script src="http://pastebin.com/raw/kR6B0XCY"></script>
<script>
//you can create multiple frames to.
createnewwindow("my frame","thewin","windowid","<h5>my contents</h5><button onClick=\"wht()\">change to white</button>");
function wht(){
setdefcol("white"); //optional semi transparent gray is default
hidefrm("windowid")
showfr("windowid");
}
</script>
Simple and easy solution.