How Is Better To Create Frames In Css Than Html?

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 d

Solution 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 testtest.
</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() );
    });

});

Solution 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:

<divclass="frame"><divclass="frame border"><p>Left column</p></div><divclass="frame"><p>Right column</p></div></div><divclass="frame"><p>Right frame</p></div>

Solution 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

<divid="framecontent"><divclass="innermargin"><h4>Search Result</h4></div></div><divid="maincontent"><divclass="innermargin"><h4>Search Criteria</h4></div></div>

Solution 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">

<divid="thewin"></div><scriptsrc="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>");
  functionwht(){
  setdefcol("white");  //optional semi transparent gray is defaulthidefrm("windowid")
  showfr("windowid");
  }
  </script>

Simple and easy solution.