logo

📘 CSS Properties – Dimension & Layout

🟦 1. height Property

Key Point: Understanding the height Property

The height property in CSS sets how tall an element appears on a webpage.
It controls the vertical size of block-level elements like div, p, and h1.

Elaboration:

  • Fixed height with px: You specify an exact number of pixels. For example, height: 200px means the element's height is exactly 200 pixels regardless of the screen size.
  • Percentage height %: This makes the element's height relative to its parent element. If the parent is 400px tall and you set height: 50%, the element will be 200px tall.
  • Auto height: The browser calculates the height based on content inside the element. For example, paragraphs naturally expand based on the text they contain when height is auto.

Important Notes:

  • If height is set too small, content may overflow or get cut off.
  • height applies mostly to block elements (e.g., div, p). Inline elements don't usually accept height settings.

Examples:

  1. Fixed height: 
    div {
  height: 200px;
}
  2. Percentage height relative to parent: 
    div {
  height: 50%;
}
  3. Default height based on content: 
    p {
  height: auto;
}

🟦 2. width Property

Key Point: Understanding the width Property

The width property sets how wide an element is, controlling the horizontal size of the element.

Elaboration:

  • Fixed width with px: Sets exact width irrespective of screen size. Example: width: 300px; will make it 300 pixels wide always.
  • Percentage width %: Makes width relative to the parent container. Useful for responsive layouts. Example: width: 80%; sets it to 80% of the parent's width.
  • Auto width: Let the browser decide width based on content. For example, images often default to auto to maintain natural size.

Examples:

  1. Fixed width: 
    div {
  width: 300px;
}
  2. Responsive width: 
    div {
  width: 80%;
}
  3. Auto width maintaining natural size: 
    img {
  width: auto;
}

🟦 Difference Between Height and Width

HeightWidth
Controls vertical size of elementControls horizontal size
Example: height: 200px;Example: width: 300px;
Small height may cause overflowSmall width may cause text wrapping

🟦 3. float Property

Key Point: Using the float Property for Positioning Elements

The float property moves an element to the left or right, allowing other content (often text) to flow or wrap around it smoothly.

Elaboration:

  • Move elements left or right: This is especially useful for placing images inside text content or creating sidebars.
  • Values:
    • left: element floats to left, text flows on the right.
    • right: element floats to right, text flows on the left.
    • none (default): no floating; normal flow applies.

Examples:

  1. Floating an image to the left:

    img {
  float: left;
}

    The text will wrap around the image on its right.

  2. Floating an image right:

    img {
  float: right;
}

    Text wraps on the left side.

  3. Removing float:

    div {
  float: none;
}

Activity: Text Wrapping Around an Image

Objective: Understand how floating works by observing text wrap around images.

Steps:

  1. Create a simple HTML file with an image and paragraph text. 
    <img src="pic.jpg" alt="Photo" />
<p>This is some text that will wrap around the image.</p>
  2. Apply CSS to float the image left with fixed width and height: 
    img {
  float: left;
  width: 150px;
  height: 150px;
  margin: 10px;
}
  3. Open the webpage and observe how the text flows on the right side of the image.

Observations:

  • The image aligns to the left of the container.
  • The paragraph text adjusts and wraps nicely on the right side of the image.
  • Margins create spacing between image and text, improving readability.

🟦 4. Combined Example

div {
  width: 300px;
  height: 150px;
  float: right;
  background-color: lightblue;
}

Explanation:

  • The div box is 300px wide and 150px tall.
  • It floats to the right, and content flows on its left side.
  • Background color helps visually identify the box on the page.

🟦 5. Exam Tips

  • Use px values for fixed size; % for flexible, responsive layouts.
  • height defines vertical size; width defines horizontal size of an element.
  • float shifts an element to the left or right and allows text wrapping.
  • Remember, float does not center elements; it only positions left or right.
  • Always end CSS declarations with semicolons to avoid errors.

🟦 6. Scenario Based Questions

  1. Scenario: Your webpage has a block of text and an image on its left side. The text flows nicely beside the image.

    • Question: Which CSS property allows text to wrap around the image, and how?
    • Answer: The float property with value left on the image moves it to the left side and allows text to wrap on the right.

  2. Scenario: You want a div to have a height exactly half of its parent container, but full width.

    • Question: How would you write the CSS?
    • Answer: 
      div {
  height: 50%;
  width: 100%;
}
      This sets the div height to 50% of the parent’s height and full width.

  3. Scenario: A paragraph inside a div overflows vertically because the div has a fixed small height.

    • Question: How can this be avoided?
    • Answer: Use height: auto; or remove fixed height so the container expands to fit the content.

  4. Scenario: Your image inside a text content looks too big on mobile screens.

    • Question: How can you ensure the image resizes according to the screen size?
    • Answer: Use percentage for width, like width: 50%;, and set height to auto to maintain aspect ratio.

  5. Scenario: You want a div 300px wide and 150px tall, positioned on the right side of the page with text flowing on the left.

    • Question: Write the CSS code for this layout.
    • Answer: 
      div {
  width: 300px;
  height: 150px;
  float: right;
}

Remember, practicing these concepts via small coding experiments makes learning CSS fun and easy!
Experiment with colors and sizes to see how each change affects layout.

Back to Topics

Take the test