Page format using CSS -
i trying align text in page right of picture, , put kind of box around whole thing have content aligned in center of page.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test page</title> <style> body { padding-top: 10px; } </style> </head> <body> <div class="container"> <div> <h1>the title</h1> </div> <hr> <div> <div> <img src="http://placehold.it/200x200" alt=""> </div> <div> <h3>brief description</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nam viverra euismod odio, gravida pellentesque urna varius vitae. sed dui lorem, adipiscing in adipiscing et, interdum nec metus. mauris ultricies, justo eu convallis placerat, felis enim. </p> <h3>more details</h3> <ul> <li>lorem ipsum</li> <li>dolor sit amet</li> <li>consectetur</li> <li>adipiscing elit</li> </ul> </div> </div> <hr> </div> </body> </html>
please try code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test page</title> <style> body { padding-top: 10px; } </style> </head> <body> <div class="container"> <div> <h1>the title</h1> </div> <hr> <div> <div style="float: left; width: 30%"> <img src="http://placehold.it/200x200" alt=""> </div> <div style="float: left; width: 70%"> <h3>brief description</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nam viverra euismod odio, gravida pellentesque urna varius vitae. sed dui lorem, adipiscing in adipiscing et, interdum nec metus. mauris ultricies, justo eu convallis placerat, felis enim. </p> <h3>more details</h3> <ul> <li>lorem ipsum</li> <li>dolor sit amet</li> <li>consectetur</li> <li>adipiscing elit</li> </ul> </div> </div> </div> <hr> </body> </html> 
Comments
Post a Comment