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; }