FlexBox Fixed Left Side Bar and Header Layout
How do I make an flexbox fixed left side bar and header layout?
What is a flexbox fixed left side bar and header layout? How do you make a flexbox fixed left side bar and header layout? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.
FlexBox Fixed Left Side Bar and Header Layout Previews
FlexBox Fixed Left Side Bar and Header Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FlexBox Fixed Left Side Bar and Header Layout</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="pageLeft"> <aside class="left-sidenav"> <nav> <img alt="logo" src=""> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> </nav> </aside> </div> <div id="pageBody"> <header id="masthead" class="site-header" role="banner"> <nav> <ul> <li>Link 1</li> <li>Link 1</li> <li>Link 1</li> </ul> </nav> </header> <section> <div id="page" role="main" class="row"> <article class="main-content small-10 columns"> <p>Lorem ipsum Do cupidatat deserunt nulla nostrud non sunt labore eiusmod ad ut ea eiusmod aute nisi enim nisi eu reprehenderit eu laboris Ut quis qui pariatur cupidatat culpa ut exercitation cillum in Excepteur id ea ut nulla cupidatat reprehenderit Ut eiusmod in sed eiusmod velit id nulla aliqua incididunt aliqua amet culpa enim anim ut dolor velit proident eiusmod veniam anim pariatur exercitation esse proident esse non eiusmod ullamco nostrud magna dolor officia voluptate ad qui ex nulla ut sunt nulla irure consequat anim deserunt sit ullamco non dolore adipisicing dolore aliqua nulla veniam cillum adipisicing nisi nulla est in nulla pariatur laborum velit amet deserunt sint eu sit dolor nisi occaecat in amet cillum officia magna commodo voluptate Ut aute Excepteur eiusmod eu irure adipisicing ea mollit aliquip elit commodo ullamco Ut Duis dolore Ut aliquip qui ea dolore laboris incididunt ad mollit elit quis.</p> <p>Lorem ipsum Do cupidatat deserunt nulla nostrud non sunt labore eiusmod ad ut ea eiusmod aute nisi enim nisi eu reprehenderit eu laboris Ut quis qui pariatur cupidatat culpa ut exercitation cillum in Excepteur id ea ut nulla cupidatat reprehenderit Ut eiusmod in sed eiusmod velit id nulla aliqua incididunt aliqua amet culpa enim anim ut dolor velit proident eiusmod veniam anim pariatur exercitation esse proident esse non eiusmod ullamco nostrud magna dolor officia voluptate ad qui ex nulla ut sunt nulla irure consequat anim deserunt sit ullamco non dolore adipisicing dolore aliqua nulla veniam cillum adipisicing nisi nulla est in nulla pariatur laborum velit amet deserunt sint eu sit dolor nisi occaecat in amet cillum officia magna commodo voluptate Ut aute Excepteur eiusmod eu irure adipisicing ea mollit aliquip elit commodo ullamco Ut Duis dolore Ut aliquip qui ea dolore laboris incididunt ad mollit elit quis.</p> <p>Lorem ipsum Do cupidatat deserunt nulla nostrud non sunt labore eiusmod ad ut ea eiusmod aute nisi enim nisi eu reprehenderit eu laboris Ut quis qui pariatur cupidatat culpa ut exercitation cillum in Excepteur id ea ut nulla cupidatat reprehenderit Ut eiusmod in sed eiusmod velit id nulla aliqua incididunt aliqua amet culpa enim anim ut dolor velit proident eiusmod veniam anim pariatur exercitation esse proident esse non eiusmod ullamco nostrud magna dolor officia voluptate ad qui ex nulla ut sunt nulla irure consequat anim deserunt sit ullamco non dolore adipisicing dolore aliqua nulla veniam cillum adipisicing nisi nulla est in nulla pariatur laborum velit amet deserunt sint eu sit dolor nisi occaecat in amet cillum officia magna commodo voluptate Ut aute Excepteur eiusmod eu irure adipisicing ea mollit aliquip elit commodo ullamco Ut Duis dolore Ut aliquip qui ea dolore laboris incididunt ad mollit elit quis.</p> <p>Lorem ipsum Do cupidatat deserunt nulla nostrud non sunt labore eiusmod ad ut ea eiusmod aute nisi enim nisi eu reprehenderit eu laboris Ut quis qui pariatur cupidatat culpa ut exercitation cillum in Excepteur id ea ut nulla cupidatat reprehenderit Ut eiusmod in sed eiusmod velit id nulla aliqua incididunt aliqua amet culpa enim anim ut dolor velit proident eiusmod veniam anim pariatur exercitation esse proident esse non eiusmod ullamco nostrud magna dolor officia voluptate ad qui ex nulla ut sunt nulla irure consequat anim deserunt sit ullamco non dolore adipisicing dolore aliqua nulla veniam cillum adipisicing nisi nulla est in nulla pariatur laborum velit amet deserunt sint eu sit dolor nisi occaecat in amet cillum officia magna commodo voluptate Ut aute Excepteur eiusmod eu irure adipisicing ea mollit aliquip elit commodo ullamco Ut Duis dolore Ut aliquip qui ea dolore laboris incididunt ad mollit elit quis.</p> <p>Lorem ipsum Do cupidatat deserunt nulla nostrud non sunt labore eiusmod ad ut ea eiusmod aute nisi enim nisi eu reprehenderit eu laboris Ut quis qui pariatur cupidatat culpa ut exercitation cillum in Excepteur id ea ut nulla cupidatat reprehenderit Ut eiusmod in sed eiusmod velit id nulla aliqua incididunt aliqua amet culpa enim anim ut dolor velit proident eiusmod veniam anim pariatur exercitation esse proident esse non eiusmod ullamco nostrud magna dolor officia voluptate ad qui ex nulla ut sunt nulla irure consequat anim deserunt sit ullamco non dolore adipisicing dolore aliqua nulla veniam cillum adipisicing nisi nulla est in nulla pariatur laborum velit amet deserunt sint eu sit dolor nisi occaecat in amet cillum officia magna commodo voluptate Ut aute Excepteur eiusmod eu irure adipisicing ea mollit aliquip elit commodo ullamco Ut Duis dolore Ut aliquip qui ea dolore laboris incididunt ad mollit elit quis.</p> </article> <aside class="sidebar small-2 columns"> <div> <p>This is a poll</p> </div> </aside> </div> </section> <div id="footer-container"> <footer id="footer"> <p>This is the footer!</p> </footer> </div> </div>
</body>
</body>
</html>
FlexBox Fixed Left Side Bar and Header Layout - Script Codes CSS Codes
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; min-height: 100%; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
#pageLeft, #pageBody { display: -webkit-box; display: -ms-flexbox; display: flex;
}
#pageLeft { background: #000; color: #fff; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; width: 240px;
}
#pageLeft aside { position: fixed;
}
#pageBody { background: gray; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: block; width: 100%;
}
#pageBody header { background-color: darkgray; position: fixed; width: 100%; height: 100px;
}
#pageBody section { margin-top: 120px;
}
#pageBody section #page aside.sidebar { border: 1px solid #000;
}
#pageBody footer { background-color: darkgray; padding: 20px;
}
| Developer | Gigaleet |
| Username | Gigaleet |
| Uploaded | January 08, 2023 |
| Rating | 3 |
| Size | 2,822 Kb |
| Views | 8,096 |
Do you need developer help for FlexBox Fixed Left Side Bar and Header 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!
Gigaleet (Gigaleet) Script Codes
| Name | Size |
| A Pen by Gigaleet | 2,535 Kb |
| CSS placeholder labels | 1,566 Kb |
| Light Box | 2,387 Kb |
| Status Loader | 3,646 Kb |
| Pure CSS Hamburger Button | 2,160 Kb |
| Modern Login Box | 4,165 Kb |
| Modal Dialog | 2,251 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| Test | Dviate | 2,668 Kb |
| FCC_Twitch.tv | MitchES | 3,466 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Ghost | Mghayour | 11,738 Kb |
| Preloader | Rikki_Sixx | 2,815 Kb |
| Break Out | AzazelN28 | 12,431 Kb |
| Cofee and sugar | Tripack | 2,094 Kb |
| Lightrays v2 | Sinthetyc | 2,903 Kb |
| Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
| Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!