CODEWITHSUNDEEP
htmlcss
user7505714
user7505714

Reputation:

Html convert frameset and frame into div

Hello guys there is any way to conver frameset into div+css to can align the frame like in the image. 2nd and and 4th frameset are void because i want to have banner and content centered

So i dont know well html and i wonder if i cant use div and css to look like in the picture

Html code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TITLE</title>
    </head>
    <frameset cols="255,1418,255" border="2">
        <frameset cols="255,*" border="2">
        </frameset>
        <frameset rows="250,*" border="2">
            <frame src="banner.html" />
            <frame src="content.html" />
        </frameset>
        <frameset cols="255,*" border="2">
        </frameset>
    </frameset>
</html>

Result

enter image description here

Upvotes: 0

Views: 2905

Answers (1)

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

Try using a combindation of calc and width:100%, height: 100%. Setting an elements's width or height to 100% causes it to take up the entire parent container's height or width. Additionally, calc can be used to take up any remaining height.

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

#parent {
    margin: 0 auto;
    background-color: red;
    width:90%;
    height: 100%;
}

#banner {
    width: 100%;
    background-color: yellow;
    height:100px;
}

#content {
    width: 100%;
    background-color: green;
    height:calc(100% - 100px);
}

<div id="parent">
    <div id="banner">
        banner goes here.
    </div>
    <div id="content">
        content goes here.
    </div>
</div>

Upvotes: 1

Related Questions