[Mobile Web] Fluid Layout -- Ex

SET WIDTH OF SIDEBAR

 

Using percentages, set the width for the .sidebar to the equivalent of 400px to 6 decimals. Remember, the context is the total width of the site which is 960px. Use the HTML and CSS Source tabs for more information. Use this Flexible Math tool to help.

.sidebar {
  width: 41.666667%; /*400px/960px;*/
}

 

SET WIDTH OF CONTENT

 

Using percentages, set the width for the .content to the equivalent of 575px. Remember, the context is the total width of the site which is 960px. Use this Flexible Mathtool to help.

.content {
  width: 59.89583333333334%; /* 575 / 960 */
}

 

DETERMINE THE CONTEXT #1

 

From the markup in the HTML Source, what is the correct context for the h1 element? Enter the CSS selector for the correct HTML element below.

<div class="container">
  <header>
    <h1>Journey Into Mobile</h1>
  </header>
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Answer: header

 

DETERMINE THE CONTEXT #2

 

From the markup in the HTML Source, what is the correct context for .content? Enter the CSS selector for the correct HTML element below.

<div class="container">
  <header>
    <h1>Journey Into Mobile</h1>
  </header>
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Answer: .container

 

CONVERT TO PERCENTAGE

 

From the CSS styles given, convert .content to a percentage. Give your answer to 6 decimals. Use this Flexible Math tool to help.

.content {
  width: 57.291667%; /* 550 / 960 */
}

 

SET MARGIN OF CONTENT

 

Using percentages, set the margin-right of .content to the equivalent of 380pxto 6 decimals. Determine the correct context by viewing the given HTML markup.

.content {
  margin-right:  39.58333333333333%; /* 380 / 960 */
}

 

SET PADDING OF CONTENT

 

Using percentages, set the padding of .content to the equivalent of 31px. Determine the correct context by viewing the given HTML markup. Give your answer to at least 7 decimals.

.container {
  width: 960px;
}
.sidebar {
  width: 360px;
}
.content {
  width: 560px;
}

Answer:

.content {
padding: 5.5357143%;
}