CODEWITHSUNDEEP
csshtmlwidth
leora
leora

Reputation: 196861

div width in css

i have a div on a web page that basically acts as a panel container. i want it to:

  1. have a minimum width of 1000px; So no matter how small the content inside the div is, it will at least keep the panel to 1000px in width:
  2. in terms of max width, it should keep going as big as the content within it. So if a person has a 24 inch monitor and they want to maximize the browser it should keep growing until the content inside doesn't have any scroll bars and then stop.
  3. needs to work in all browsers.

how would i do this in css?

Upvotes: 1

Views: 588

Answers (3)

Francisc
Francisc

Reputation: 80505

Try this:

#panel
{
   /* Other styles */
   min-width:1000px;
   /*width:100%; - removed as it will create horizontal scrollbar if margin and padding aren't 0 as per Josh's comment.*/
}

However, you will problems with older browsers like IE6 which do not like the min-width thingy in which case you will need to use JavaScript.

Upvotes: 1

Anjum
Anjum

Reputation: 277

try this

#panel {
  min-width: 1000px;
  diplay: block;
  overflow: hidden; }

Upvotes: 1

Joshua
Joshua

Reputation: 3603

Assuming this item is a block element (i.e. "display: block"), it should scale automatically as wide as its containing element (in this case the browser window).

In CSS, just specify "min-width: 1000px." This will work in IE8+ and all modern browsers.

Upvotes: 3

Related Questions