Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 04/22/2017 in all areas

  1. Block elements such as div, h1, p fill the width available to them, any element below them will stack below them, if floated or not. A floated element before a block element/s, will cause the block element to merge within it, and even though the block element still take the full width, the text within them will flow to and around the edges of floated element. #1 If you place img element within the first paragraph, which you can because is a inline element and acts similar to text, It will fall below header h1, the first paragraph text will merge to edge of img element as will the second paragraphs text. For adding a div element to .content class div for extra column, you need to float and set its width to requirements.#2 and #3 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } .column.content {float: right;} .column.content > img {float: left; max-width: 25%; margin: 0 8px;} .column.content > div {max-width: 25%;} .column.content > div img {max-width: 100%;} .column.content > div.left {float: left; margin: 0 8px; } .column.content > div.right {float: right; } </style> </head> <body> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""> <h1>The City #1</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="left"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #2</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> <div class="column content"> <div class="right"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div> <h1>The City #3</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
    1 point
×
×
  • Create New...