CSS can't shrinkwrap divs

[Dal123]

Just when I thought I had the basics of css covered I've stumbled on a problem. I want my page-content div to wrap around the sidebar as I was wasting too much space below the sidebar. But I don't want static layout as the sidebar will be changing with more projects, and possibly page content also. I would also like my headers to be shrinkwrapped but width:auto is not working and can't see a reason for this. The movie is filling the whole page-content and I cannot use the sidebar links. I changed the z-index order and the sidebar is working but this is no solution so I have left it as it is.
It's hard for me to explain exactly without boring you all, so the first thing is:
container: 900px wide position relative
page-content to 100% width and height which is absolute positioned.
sidebar: floated right
.movie: width:auto (which should shrinkwrap the class movie but not working)

<div class="movie">
<object width="305" height="215">
<param name="movie" value="3d_concrete_stairs.swf">
<embed src="3d_concrete_stairs.swf" width="305" height="215">
</embed>
</object>
</div>

<h1>About Us</h1>
<p>At Precise Formwork Limited we are a specialist Formwork sub-contractor, primarily working for larger main-contractors, and occasionaly private clients.
Specialising further into reinforced concrete staircases, we are able to provide 3 dimensional renderings even onto the existing property, so you can get 
an accurate impression of the project before it takes place.</p>
</br>

Thanks for any input, sorry if unclear 🙂

 

[designguy79]

Can you post an example/test page somewhere?

Also, maybe a JPG of what you are expecting it to do?

One thing I noted off that bat is the "height: 100%"... very much a pain, and try and avoid it like the plague. 😀 Read more here...

 

[designguy79]

Also, I found this tutorial extremely helpful when I first started out. Make sure and read all 5 pages, and then do some practice runs yourself!

 

[IgnatiusTheKing]

I'm a little confused by your post, but if I understand correctly, I think you should use margin:auto instead of width:auto.

 

[Darth.Titan]

Like the others, I'm not exactly sure what you're talking about, but I'm guessing that your floated sidebar is affecting your layout in ways you don't expect. Floating an object takes it out of the normal flow of the content.

Try putting an empty <div style="clear: both"></div> right before the closing tag for your container div and see if that resolves any of your issues.

 

[manueld]

You should post all of your css as well as all of the html so people can give you proper feedback.

 

[eponym]

I'm just making a guess here but I think you're referring to the behaviour differences between display:block and display:inline-block and a bit of how containers behave with floated elements inside.

So by "shrinkwrap" I'm guessing you mean the wrapper stays the same size as the content.

Block level elements (divs, h1, p etc) by default fill the width of their parent. Width:auto won't change that because that is the automatic behaviour. If the element is an inline-block or if it's floated, then it will only got as wide as its content requires.