CSS can't shrinkwrap divs

Discussion in 'Web Design and Development' started by Dal123, Aug 20, 2010.

Most Liked Posts
  1. Dal123, Aug 20, 2010

    Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    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)

    Code:
    <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 :)
     
    share
    + Quote Reply
  2. designguy79, Aug 20, 2010

    designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #2
    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. :D Read more here...
     
    share
    + Quote Reply
  3. designguy79, Aug 20, 2010

    designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #3
    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!
     
    share
    + Quote Reply
  4. IgnatiusTheKing, Aug 20, 2010

    IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #4
    I'm a little confused by your post, but if I understand correctly, I think you should use margin:auto instead of width:auto.
     
    share
    + Quote Reply
  5. Darth.Titan, Aug 20, 2010

    Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #5
    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.
     
    share
    + Quote Reply
  6. manueld, Aug 20, 2010

    manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #6
    You should post all of your css as well as all of the html so people can give you proper feedback.
     
    share
    + Quote Reply
  7. eponym, Aug 20, 2010

    eponym macrumors 6502

    Joined:
    Jul 2, 2010
    #7
    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.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page