html - Div tag layout using box and position properties -
exact instructions follow
use div tag (alone) implement layout on imgur link provided below. box properties & position properties can used.
my interpretation of above instruction , image provided is...
there should container top width 70% , bottom 30%, split 2 elements floated on right side. first (upper element) nested image 30% width, 50% height. second (lower element) nested p element 70% width 50% height.
i believe difficult explain , better understood wireframe layout of expected.
here picture of expected layout http://imgur.com/yjdo5xa
i'm sure there better , easier ways accomplish task have stick requirements provided in instruction.
here code have far.
div { float: left; width: 100%; height: 100%; border: 1px solid blue; } div > img { float: right; width: 30%; height: 50%; border: 1px solid red; } .div p { float: right; margin-left: 30%; width: 30%; height: 50%; border: 1px solid blue; } html<div> <p>text in black</p> <img src="image1.jpg" width="150px" height="150px" alt="image1"> <p>text in blue</p> </div>
this should fix issue, sorry first answer on website may tad rusty.
i've cleared body padding , margin since browsers implement default. proceed make 3 div's id's needs, tricky bit "blue" div, make work use absolute position , set top 50% left 30% , appears on "black" div , under "image" div.
hope helps you.
html
<head> <title> dewbe div layout css3 </title> <link href="styles.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="black"> </div> <div id="image"> </div> <div id="blue"> </div> </body> css
body { width:100%; height:100%; margin:0; padding:0; } #black { background-color:black; width:70%; height:100%; float:left; } #image { background-color:yellow; float:right; width:30%; height:50%; } #blue { background-color:blue; width:70%; height:50%; float:right; position:absolute; top:50%; left:30%; } 
Comments
Post a Comment