Menu
Programs
C Language
C++ (or) CPP
Java
Examples
HTML
HTML5
CSS
CSS3
JavaScript
jQuery
AngularJS
Articles
Articles
Blog
Tutorials
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
Interview Questions
Computer Science
Civil Engineering
QUIZ (or) MCQ
S/W (or) Computer Science
Civil Engineering
Mechanical Engineering
Programs
C Language
C++ (or) CPP
Java
Competitive Exams
Current Affairs
Current Affairs MCQ
Monthly Current Affairs MCQ
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2022 Prelims Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
References
Practice Templates
PHP Projects
Bootstrap 3 Plugins
Bootstrap 4 Plugins
School Mathematics
Quadratic Equations
Prime Numbers
Factorial Numbers
Fibonacci Numbers
Code Editor
IPC Sections
Home
Tutorials
CSS Example
<!DOCTYPE html> <html> <head> <title>CSS Layouts</title> </head> <body> <style type="text/css"> .header_layout{ width:96%; margin:5px auto 0px; background:#F90 !important; color:#FFF; text-transform:uppercase; font-size:20px; padding:15px 0px; text-align:center; height:70px;} .header_layout_left{ float:left; width:20%;} .header_layout_right{ float:left; width:74%;} .container_layout{width:96%; margin:0px 2% 0px; float:left; background:#EEE !important;} .layout_main_left{width:14%;float:left; padding:10px 15px; clear:both;} .layout_main_center{width:55%;float:left;background-color:pink;padding:5px; text-align:justify; padding:10px 15px; line-height:24px;} .layout_main_right{width:14%;float:left; padding:10px 15px;} .layout_footer{ width:96%; margin:0px 2% 5px; background:#F90 !important; color:#FFF; font-size:16px; padding:5px 0px 15px; text-align:center; float:left; height:30px;} </style> <div class="header_layout"> <div class="header_layout_left"><a href="http://freetimelearning.com" target="_blank"><img src="../images/Free-Time-Learning.png" width="120" height="40"></a></div> <div class="header_layout_right">Sample Project</div> </div> <div class="container_layout"> <div class="layout_main_left"> <p style="background:none !important;"><a href="#">Home</a></p> <p style="background:none !important;"><a href="#">About Us</a></p> <p style="background:none !important;"><a href="#">Services</a></p> <p style="background:none !important;"><a href="#">Gallery</a></p> <p style="background:none !important;"><a href="#">Contact Us</a></p> </div> <div class="layout_main_center"> <h4>What is Lorem Ipsum?</h4> <p style="background:none !important;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="layout_main_right"><img src="images/sample_111.jpg" width="100%"></div> </div> <div class="layout_footer"> <p style="background:none !important;">All © rights reserved by <a href="http://freetimelearning.com" target="_blank">www.freetimelearning.com</a></p> </div> </body> </html>
Output :
Topic :
CSS Layouts
