0

I am just curious whether it is possible for a HTML control (e.g: a table) to have larger width than its parent(e.g. a div) and the inner control is entirely visible? Thanks

Amyth
  • 32,527
  • 26
  • 93
  • 135
boh
  • 1,477
  • 2
  • 16
  • 35
  • A similar topic was talked about here: http://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css – nman Jan 01 '13 at 09:26

2 Answers2

3

It is absolutely possible. you can set the overflow css property of the parent element to visible as follows.

.parent {
    # Other Properties
    overflow : visible;
}

Now in this case if the width of a child element is more than the width of its parent it will be visible. overflow would work for both height and width. To make only the heigth or width visible you can use the overflow-x and overflow-y property (names are based on x-axis and y-axis).

Try This Working JSFiddle

UPDATE:

NOTE: As @cimmanon said the default value of the overflow property is set to visible so you may not need to set it explicitly as above. Though, My personal preference would be to set it explicitly in case i want to be sure of it.

Community
  • 1
  • 1
Amyth
  • 32,527
  • 26
  • 93
  • 135
  • 1
    Visible is the default value for overflow: https://developer.mozilla.org/en-US/docs/CSS/overflow – cimmanon Jan 01 '13 at 12:18
  • 1
    Except your answer makes no sense because it works even without that property set (see: http://jsfiddle.net/rF98k/1/). Your CSS files must get quite large if you go around setting everything to its default value on every element. – cimmanon Jan 01 '13 at 12:30
  • Well it's a matter of personal choice, Personally, I would not worry about a couple bytes if i want to be sure that code is not getting over-ridden by a 3rd party app's / library's CSS. And Of course i am not suggesting to do it to `every element?` – Amyth Jan 01 '13 at 12:46
1

A child's dimensions adapt to its parent element when the child's width is set to a percentage or auto and position is set to static or relative. So, if you want it to be larger, you can do the following things:

  1. Make the child element bigger than the parent (either via width or margins)
  2. Use absolute positioning
  3. Don't let the child element's descendants wrap (tables fit in here)

As long as you aren't changing the ancestor elements to have an overflow that hides things (hidden), the descendants will show through.

cimmanon
  • 67,211
  • 17
  • 165
  • 171