CODEWITHSUNDEEP
htmlcss
Austin Gayler
Austin Gayler

Reputation: 4356

How do I get a div to expand with its contents?

I have a div with these properties 

#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}

The background only shows up for 70px (I think) and then stops, then the rest of the stuff inside the div just goes on down the page like normal. If I set display:inline-block, it works correctly but uncenters my div.

Upvotes: 0

Views: 94

Answers (3)

Dane O'Connor
Dane O'Connor

Reputation: 77278

If you have elements in the container which are floating, it's possible that the floats aren't properly being cleared. If this is your problem there are a bunch of work-arounds - they're called "clearfixs".

One of my favorite write-ups was here. The css they used in this example was here.

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Upvotes: 1

user642922
user642922

Reputation:

It wouldn't expand any longer because you have set your #content width to 960px in your browser window.

In the case of your image expanding only up to 70px, it is probably because that's the actual height of the image you've used. but mistakenly used repeat-y (repeat vertically).

Here's a simple concept in background-repeat:

  1. If you want to repeat the image vertically, create an image that is horizontally wide.
  2. If you want to repeat the image horizontally, create an image that is vertically tall.

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77956

Well, you're doing repeat-y which means it'll only repeat vertically. If the background image is 70px, that would support the issue. Either use repeat-x or just repeat.

Upvotes: 0

Related Questions