Three Pane App Layout

Developer
Tim Guo
Size
2,923 Kb
Views
44,528
  1. Three Pane App Layout Previews
  2. Three Pane App Layout HTML Codes
  3. Three Pane App Layout CSS Codes

How do I make an three pane app layout?

What is a three pane app layout? How do you make a three pane app layout? This script and codes were developed by Tim Guo on 03 September 2022, Saturday.

Three Pane App Layout Previews
IQ Test

Three Pane App Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three Pane App Layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="three-pane-app three-pane-app-colored"> <div class="three-pane-app-top"> <div class="title"></div> </div> <div class="three-pane-app-bottom"> <div class="three-pane-app-bottom-left"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="three-pane-app-bottom-middle"> <div class="page"> <div class="title"></div> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> <p class="mock-paragraph"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></p> </div> </div> <div class="three-pane-app-bottom-right"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
</div>
</body>
</html>

Three Pane App Layout - Script Codes CSS Codes

*,
*:after,
*:before { box-sizing: border-box;
}
html,
body { height: 100%; overflow: hidden;
}
.three-pane-app { position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.three-pane-app .title { display: inline-block; background: rgba(0, 0, 0, 0.1); width: 10em; height: 1em; margin-bottom: 1.25em;
}
.three-pane-app-top { position: absolute; height: 3.75em; padding: 1.25em; line-height: 2.5em; width: 100%; border-bottom: 0.0625em solid rgba(0, 0, 0, 0.1);
}
.three-pane-app-bottom { position: absolute; top: 3.75em; bottom: 0; width: 100%;
}
.three-pane-app-bottom .item { height: 4em; border-bottom: 0.0625em solid rgba(0, 0, 0, 0.1); cursor: pointer;
}
.three-pane-app-bottom .item:hover { background: rgba(0, 0, 0, 0.1); border-bottom: 0.0625em solid rgba(0, 0, 0, 0);
}
.three-pane-app-bottom .item:last-child { border-bottom: 0;
}
.three-pane-app-bottom-left { border-right: 0.0625em solid rgba(0, 0, 0, 0.1); position: absolute; width: 20%; height: 100%; overflow: auto;
}
.three-pane-app-bottom-middle { position: absolute; width: 60%; left: 20%; height: 100%; overflow: auto;
}
.three-pane-app-bottom-middle .page { width: 40em; padding: 1.25em; max-width: 100%; margin: 0 auto;
}
.three-pane-app-bottom-right { border-left: 0.0625em solid rgba(0, 0, 0, 0.1); position: absolute; width: 20%; right: 0; height: 100%; overflow: auto;
}
.three-pane-app-colored .title { background: #3485cc;
}
.three-pane-app-colored .three-pane-app-top { border-bottom-color: rgba(52, 133, 204, 0.2); background: #3485cc;
}
.three-pane-app-colored .three-pane-app-top .title { background: #c5e4ff;
}
.three-pane-app-colored .three-pane-app-bottom-left { border-right-color: rgba(52, 133, 204, 0.2); background: rgba(52, 133, 204, 0.1);
}
.three-pane-app-colored .three-pane-app-bottom-right { border-left-color: rgba(52, 133, 204, 0.2); background: rgba(52, 133, 204, 0.1);
}
.three-pane-app-colored .three-pane-app-bottom .item { border-bottom-color: rgba(52, 133, 204, 0.2);
}
.three-pane-app-colored .three-pane-app-bottom .item:hover { background: rgba(52, 133, 204, 0.2); border-bottom-color: rgba(0, 0, 0, 0);
}
.mock-paragraph b { display: inline-block; background: rgba(0, 0, 0, 0.1); width: 3.125em; height: .5em; margin-right: .3125em; margin-bottom: .3125em;
}
.mock-paragraph b:nth-last-child(4n+1) { width: 4.5625em;
}
.mock-paragraph b:nth-last-child(10n+1) { width: .875em;
}
.mock-paragraph b:nth-last-child(9n+1) { width: 5em;
}
Three Pane App Layout - Script Codes
Three Pane App Layout - Script Codes
Home Page Home
Developer Tim Guo
Username timothyguo
Uploaded September 03, 2022
Rating 3
Size 2,923 Kb
Views 44,528
Do you need developer help for Three Pane App Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Guo (timothyguo) Script Codes
Name
Angular Template
Css Transition
CSS Quantity Queries Demo
Create User
Responsive holy grail layout with Flexbox
Sticky Footer with Flexbox
Responsive Alert Settings
A Pen by Tim Guo
Pong
Pacman loading animation
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!