Difference between revisions of "More div"

From MyWiki
Jump to: navigation, search
Line 24: Line 24:
 
<div id="upright"></div>
 
<div id="upright"></div>
 
<div id="below"></div>
 
<div id="below"></div>
 +
</source>
 +
 +
float:left is your friend<br
 +
 +
HTML:
 +
 +
<source lang="html4strict">
 +
 +
<div id="wrapper">
 +
    <div id="first"></div>
 +
    <div id="second"></div>
 +
    <div id="third"></div>
 +
</div>
 +
 +
The CSS:
 +
 +
div {
 +
    display: block;
 +
}
 +
#wrapper {
 +
    width: 400px;
 +
    height:400px;
 +
}
 +
 +
#first {
 +
    float:left;
 +
    width: 33%;
 +
    height: 100%;
 +
    background: red;
 +
}
 +
 +
#second {
 +
    float:left;
 +
    width: 67%;
 +
    height: 30%;
 +
    background: green;
 +
}
 +
 +
#third {
 +
    float:left;
 +
    width: 67%;
 +
    height: 750%;
 +
    background: blue;
 +
}
 
</source>
 
</source>

Revision as of 12:02, 12 June 2014

Make CSS as :

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}
 
#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}
 
And in HTML
 
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

float:left is your friend<br

HTML:
<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>
 
The CSS:
 
div {
    display: block;
}
#wrapper {
    width: 400px;
    height:400px;
}
 
#first {
    float:left;
    width: 33%;
    height: 100%;
    background: red;
}
 
#second {
    float:left;
    width: 67%;
    height: 30%;
    background: green;
}
 
#third {
    float:left;
    width: 67%;
    height: 750%;
    background: blue;
}