What is the best way to conceal half of a div at the top within another div?

Question

What is the best way to conceal half of a div at the top within another div?

Can someone provide guidance on how to achieve the following effect in CSS?

I have attempted setting the outer div with position: relative and the inner div with position: absolute, but it did not work as expected.

Your advice is greatly appreciated. Thank you!


    ------------
    |//////////|
    |//////////|  <= hidden
--------------------
|   |          |   |
|   | inner div|   |
|   |          |   |
|   ------------   |
|                  |
|                  |
|                  |
|                  |
--------------------

css html position

Answer 1

Answer №1

Your solution is almost there! To make it perfect, you just need to set the overflow property of the parent element to hidden. By default, the browser sets it as visible, allowing elements to overflow and be visible outside their boundaries.

Check out this example showcasing overflow: hidden in action. See it on JSFiddle.

Code Snippets:

<div id="parent">
  <div>
  </div>
</div>

CSS Styling:

#parent {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  overflow-y: hidden;
}
#parent > div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 25px;
  background: #555;
}

Keep in mind that in this demonstration, only vertical overflow is hidden. You can hide overflow in all directions, horizontally or vertically individually. It's a useful feature to control content visibility.

If you want to delve deeper into overflow properties, consider reading Chris Coyier's informative article on the topic: The CSS Overflow Property. It's worth a read!

Answer 2

Your solution is almost there! To make it perfect, you just need to set the overflow property of the parent element to hidden. By default, the browser sets it as visible, allowing elements to overflow and be visible outside their boundaries.

Check out this example showcasing overflow: hidden in action. See it on JSFiddle.

Code Snippets:

<div id="parent">
  <div>
  </div>
</div>

CSS Styling:

#parent {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  overflow-y: hidden;
}
#parent > div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 25px;
  background: #555;
}

Keep in mind that in this demonstration, only vertical overflow is hidden. You can hide overflow in all directions, horizontally or vertically individually. It's a useful feature to control content visibility.

If you want to delve deeper into overflow properties, consider reading Chris Coyier's informative article on the topic: The CSS Overflow Property. It's worth a read!

Answer 3

Answer №2

If you want to make your design more responsive, try using percentage dimensions like this:

$('.clicker').on('click', function() {
  $('.container').toggleClass('display-box');
});

This code snippet demonstrates how to center content and create an interactive toggle button.

Answer 4

If you want to make your design more responsive, try using percentage dimensions like this:

$('.clicker').on('click', function() {
  $('.container').toggleClass('display-box');
});

This code snippet demonstrates how to center content and create an interactive toggle button.

What is the best way to conceal half of a div at the top within another div?

Answer №1

Code Snippets:

CSS Styling:

Answer №2

Similar questions

jQuery wrapAll issue

Toggle a button with javascript

Extracting information from an HTML table with Jsoup

Determining the True Width of a Div

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

When I try to call another page by clicking a button in my Django Framework application, the functionality does not seem to be functioning

Polymer event / callback for appending new child nodes

Determine the Position of the Identical Element within an Array

In what way can a programmer create HTML tailored to a designer's needs, even without a comprehensive grasp of

Discover the perfect technique to employ insertString for effortlessly adding a new line onto a JEditorPane integrated with HTML functionality

Error: The identifier has already been declared and cannot be re-declared

Leveraging keyboard input for authentication in Angular

bootstrap radio button that cannot be deselected

Creating hyperlinks in HTML using a similar functionality to a LinkButton within a Repeater control in ASP.NET

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

Extracting text from HTML tags can be quite tricky, especially when you need the text within a specific tag like <td> but not within any nested tags like <

AngularJS: The dynamic setting for the stylesheet link tag initiates the request prematurely

The background color of the HTML element is not displaying properly in Internet Explorer 8

What steps should I take to send an html form for server-side validation once I have completed successful validation on the client side using jQuery

What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?