Step 1 :- First try to analyze the div structure then design it. Main concept is float left and float right.
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
#div1{
background: red;
height: 40px;
}
#div2{
width: 30px;
height: 30px;
background: white;
color:black;
}
.alignLeft {
float : left;
}
.alignRight {
float : right;
}
.paddingRight{
padding-right : 5%;
}
.greenBg{
background-color : green;
width : 23%;
margin : 5px 5px 5px 5px;
}
.mainContainer {
margin : 3% 25% 25% 25%;
border-width : 2px;
border-style: solid;
}
.bodyContainer{
margin :0px;
}
.redBg{
background-color : red;
height: 50%;
margin : 5px 5px 5px 5px;
}
.marronBg{
background-color : #834698;
margin : 5px 5px 5px 5px;
width : 43%;
height : 20%;
}
.lightBlue{
background-color : #33CCFF;
width : 73%;
margin : 5px 5px 5px 5px;
}
.darkBlue{
background-color : #1975D1;
height: 50%;
margin : 5px 5px 5px 5px;
}
.orangeBg{
background-color : orange;
margin : 5px 5px 5px 5px;
height : 5%;
}
.skyBlue{
background-color : #CCF5FF ;
width : 50%;
height : 50%;
}
.clearBoth{
clear:both;
}
.footer{
background-color : green;
margin : 5px 5px 5px 5px;
padding-left: 40%;
padding-right: 40%
}
.width25{
width : 23%;
}
.width45{
width : 45%;
height : 20%;
}
h2,h4,h6{
padding-left : 5%;
}
.midData{
padding-top: 10%;
padding-left : 30%;
padding-right : 30%;
}
.date{
padding-left : 80%;
}
</style>
</head>
<body>
<div class="mainContainer">
<!-- Header section!-->
<div class="header">
<div class="alignLeft greenBg">
<h2>Logo</h2>
<h6>User4</h6>
</div>
<div class="alignright lightBlue">
<h2>Flash Header</h2>
<h6 class="paddingRight date">Current Date</h6>
</div>
<div class="clearBoth">
</div>
<div class="orangeBg">
<h4>User3/Pathway</h4>
</div>
</div>
<!-- Main body container !-->
<div class="bodyContainer">
<div class="alignLeft redBg width25">
<h2>Left</h2>
</div>
<div class="skyBlue alignLeft">
<div class="alignLeft marronBg">
<h2>User1</h2>
</div>
<div class="alignRight greenBg width45">
<h2>User2</h2>
</div>
<div class="clearBoth">
</div>
<h2 class="midData">Component</h2>
</div>
<div class="alignRight darkBlue width25">
<h2>Right</h2>
</div>
</div>
<div class="clearBoth">
</div>
<!-- Footer section !-->
<div class="footer">
<h2>Footer/Debug</h2>
</div>
<div>
</body>
</html>
No comments:
Post a Comment