CODEWITHSUNDEEP
cssborder
aftrumpet
aftrumpet

Reputation: 1289

CSS div border shows up, but is transparent

I am trying to apply a border to only the left and right sides of a div with a solid color. When I look at the page, the elements within (which are set to fill the div width) shift over the proper number of pixels, but the border itself (a solid color) appears to not exist, or the border itself is transparent. How I get the solid color border to actually appear? Here is the CSS segment:

#menu {
border-left: 10px solid #490707;
border-right: 10px solid #490707;
}

Upvotes: 1

Views: 284

Answers (1)

Adrift
Adrift

Reputation: 59819

The border isn't appearing because #menu height has "collapsed" due to having floated descendants (the list-items) .. you can establish a new block formatting context for #menu's descendants by adding overflow: hidden; so that the floats are respected.

http://jsfiddle.net/rtqAq/1/

Eventually, when the CSS Intrinsic & Extrinsic Sizing Module Level 3 is adopted by browsers, you'll be able to use the contain-floats value for the min-height and min-width properties so you don't have to use overflow: hidden; anymore.

  1. contain-floats

Equivalent to ‘min-content’ except that when applied to the extent of a block box it forces the inner extent to be large enough to contain the margin boxes of any floats that originate inside the block and that participate in the same block formatting context as the block's immediate contents.

Upvotes: 1

Related Questions