SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any way to keep div from filling its entire container?

    Yeah yeah, more issues with my photography site....
    I'm looking to make the lighter grey div (#contw) only be a border of sorts around the image holder div (#cont) and whatnot, as opposed to filling the whole 700px (#main) divider (width wise)
    site is here
    css is here

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,280
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    If you put a width on #contw (say 500px for the pic you've got there), it should get you the effect you need. If you do that, I would also change the margin from margin-top: 10px; to margin: 10px auto; and also change the margin: 10px; in #cont to margin: 10px auto; to balance the picture out in the contw div
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only problem with setting the width actually is that I want to be able to upload portrait and/or landscape pictures...and want my page to be dynamically generating (like it currently is, with movable type), do you see?

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,280
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Klevin
    The only problem with setting the width actually is that I want to be able to upload portrait and/or landscape pictures...and want my page to be dynamically generating (like it currently is, with movable type), do you see?
    OK. I'm assuming you're using some sort of server-side scripting to do the uploads and the pertinent data is stored on a database somewhere?

    If so, then all you should need to do is have the contw div line something like this: <div id="contw" style="width: 500px;"> where the 500px would be changed systematically to go with the appropriate width of the picture. (In asp, you'd have the page coded to go like this: <div id="contw" style="width: <% =picwidth %>;"> and picwidth would be retrieved from the database.

    You would still want to make the margin changes I suggested earlier to ensure that the picture centers properly in the window

    BTW, you're also missing a closing </div> for the contw window. Just noticed that.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,280
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    You could probably also do via javascript, but the problem with that approach is if someone has javascript disabled, you'd be hosed.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell
    BTW, you're also missing a closing </div> for the contw window. Just noticed that.
    Theres a closing div there, right after the close of the table.
    Do you (or does anyone) know if there is any way to do it client side (without using JS, just regular old CSS/XHTML)? The thing is that due to the fact that movable type only saves the <img> tag code and the file is just sitting on my server, it would be a bit of a pain to write php to set the width of the "contw" div...
    Theres gotta be a css way! THERES JUST GOTTA!

  8. #8
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After much head-scratching, I can't see any CSS way, unless you specify a width on the div. From the CSS2 Spec:
    The following constraints must hold between the [...] properties:

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +
    'border-right-width' + 'margin-right' = width of containing block

    [...]

    If there is exactly one value specified as 'auto', its computed value follows from the equality.
    If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
    If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.
    I've highlighted the bit that's really relevant here.

    To get div#contw smaller than the full width of div#main, you've got to either specify a width for div#contw, or wrap another div outside #contw, and specify margins/padding on that - which still leaves #contw with a fixed width, just smaller than it is now.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seems like the W3C horribly overlooked that, which would lead to a major limitation of div's....
    Is there any way to have it follow the padding (thus making the div more of a border than content divider, as I am attempting to make it)?
    Are there any good hacks that would work? Waaaah!

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Klevin
    That seems like the W3C horribly overlooked that, which would lead to a major limitation of div's....
    If it's a "major limitation of divs" as you say, then it's also a major limitation of tables because I can't think of a way to make it work there either unless you nest complexly.
    Quote Originally Posted by Klevin
    Is there any way to have it follow the padding (thus making the div more of a border than content divider, as I am attempting to make it)?
    Are there any good hacks that would work? Waaaah!
    Dave gave you a workable solution. It's really not possible without Javascript or server-side coding.

  11. #11
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm, I ask this purely out of intelectual curiosity but couldn't you use an image in a span rather than an image in a div, something like

    HTML Code:
    <style>
    body {
     padding: 0px;
     margin: 0px;
     text-align: center;
    }
    span {
     padding: 20px;
     border: 1px solid black;
     background-color: #ccc;
    }
    img {
     border: 1px solid black;
    }
    </style>
    
    <body>
     <span>
      <img src="..." alt="..." height="y" width="x" />
     </span>
    </body>
    to get a picture any size in a fixed width multiple border round an image ?

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    If it's a "major limitation of divs" as you say, then it's also a major limitation of tables because I can't think of a way to make it work there either unless you nest complexly..
    Yeah, I understand you cant do it with tables either...although it would be nice if we could do it with divs

    Quote Originally Posted by vgarcia
    Dave gave you a workable solution. It's really not possible without Javascript or server-side coding.
    Yeah, I COULD, but my javascript skills are a bit rusty (read way rusty, just like that old el camino in my neighbors yard that has been sitting there since ive lived here, as in like not used in 3 years) and i'm lame with php...perhaps now is an opportunity to learn some php...

  13. #13
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I tried out my idea but it didn't quite work, so I modified it to this

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <style>
    <!--
    body {
    	padding: 0px;
    	margin: 0px;
    }
    
    div {
    	padding: 21px 0px;
    	text-align: center;
    }
    
    span {
    	padding: 20px;
    	border: 1px solid black;
    	background-color: #ccc;
    }
    
    img {
    	border: 1px solid black;
    }
    -->
    </style>
    </HEAD>
    <BODY>
     <div>
      <span>
       <img src="..." />
      </span>
     </div>
    </BODY>
    </HTML>
    Only tested in IE6 though I'm afraid

  14. #14
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BenANFA:
    The problem here is that it's not just the image in the div: there's a table in there, too.

    Putting a table inside a <span> is a big no-no, as it creates a block element (the table) in an inline container (the span), which gives browser renderers (and their programmers) the screaming heebie-jeebies, leading to all sorts of weird rendering issues cross-browser.

    Not to mention destroying any chance of the code validating.

    Klevin:
    The closest I can do would mean tweaking the design so that the nav and the picture are in separate boxes (using a method similar to BenANFA's) which I suspect isn't what you want.

    CSS layout isn't perfect. IMO, it's more flexible than tables, and leads to far simpler markup (hence reducing bandwidth) - but it still has limits.

  15. #15
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe I'm misunderstanding what you are trying to do but how about ditch the div, ditch the p and br tags around the image and just style the image

    Code:
     img  {				    /*content wrapper box's setup*/
        padding:20px;
     	border: solid 1px #363636;
        background-color: #C5C5C5;
     }
    or just add a class or id to the image if you want to keep your other img styling

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    behind my computer
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I might just end up redesigning the whole goddamned thing, or tweaking with the ideas youve given me....for now it'll sit as it is i'm guessing.
    Pissant: I wanted to have the nav inside of the bordered section as well...I tried that, but it ended up having the border further out (albeit with the background colored (i added in a background color))...I could in theory throw out my idea of using css and switch to tables, and do some crazy *** tabular design, but that would be bad...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •