Difference between revisions of "More div"
From MyWiki
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; }