Questions

42 of 49

1What is the display property in CSS used for?

2What is the default display value for <div>, <span>, <p>, and <a> tags?

3What is the difference between display: block and display: inline?

4How does display: inline-block behave?

5What happens when you set display: none on an element?

6How is display: none different from visibility: hidden?

7Can display: none affect layout reflow or accessibility?

8What’s the effect of display: block on inline elements like <span>?

9What’s the difference between display: table and actual HTML <table> elements?

10How do replaced elements (like <img> or <input>) behave with different display values?

11How is display: flex different from display: block?

12What is the difference between display: grid and display: flex?

13What happens if you apply display: inline-flex to a container?

14What is the difference between display: contents and display: none?

15What is display: list-item, and when is it used?

16How does display: run-in work, and why is it rarely used?

17What’s the difference between display: inline-grid and display: grid?

18How can you make an element behave like both inline and block elements?

19What happens to child elements when the parent has display: contents?

20How does the display property affect box model calculations?

21How can you change a block-level element to behave like an inline element without changing its tag?

22How do you center elements using display: flex or display: grid?

23How can you hide elements but keep their layout space?

24What happens to child elements when their parent has display: none?

25How can display: contents help improve semantic markup but hurt accessibility?

26What happens if you set display: flex on the <body> tag?

27How do you use display to build responsive layouts?

28What is the difference between using display and position to arrange elements?

29How can you visually hide an element but keep it accessible for screen readers?

30How does display affect stacking and z-index behavior?

31Does display: none remove an element from the DOM?

32Can an element with display: none trigger CSS transitions or animations?

33How does display interact with CSS pseudo-elements (::before, ::after)?

34What is the difference between visibility: collapse and display: none in table elements?

35How can you make text and icons align properly using display values?

36How do block formatting contexts relate to display types?

37What happens if you apply display: table to a flex container?

38How does display behave differently for replaced vs. non-replaced elements?

39Can display be animated using CSS transitions?

40How does display affect the accessibility tree and ARIA roles?

41How can you make a <li> element appear horizontally instead of vertically?

42How do you create a two-column layout without using float or position, using only display?

43How do you make an image and text sit side by side neatly?

44How would you make a navigation menu horizontally aligned using display?

45How can you make all elements behave as border-box and block-level by default?

46How would you use display: flex to make a footer stick to the bottom?

47How can display: grid simplify responsive design compared to floats?

48When would you prefer display: inline-flex over display: flex?

49How can you use display: contents to remove extra wrappers in semantic HTML structures? How can incorrect use of display lead to accessibility or SEO problems?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

42 / 49

How do you create a two-column layout without using float or position, using only display?

Creating Two-Column Layouts Using CSS Display

You can create a two-column layout using CSS display properties like flex or grid, without relying on floats or absolute positioning.

Common Approaches

1
display: flex – The parent container becomes a flex container, and its children (columns) align horizontally by default. You can control widths, spacing, and wrapping.
2
display: grid – The parent container becomes a grid container, allowing precise two-column layouts using grid-template-columns.

Example 1: Two Columns Using Flex

Example 2: Two Columns Using Grid

Both methods create two side-by-side columns. Flex is great for flexible widths and wrapping, while Grid provides precise control over rows, columns, and alignment.

Best Practices

1
Use flex for simple, responsive side-by-side columns that adjust naturally to container width.
2
Use grid for more complex layouts requiring explicit column widths, multiple rows, or advanced alignment.
3
Add gap to control spacing between columns instead of using margins on child elements.
4
Avoid mixing floats or absolute positioning when using flex or grid; rely solely on display properties for clean layouts.