SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Inline divs

  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline divs

    I want to put 3 fixed width, variable height divs inline. What are the minimum requirements to set this up? And will properties of a wrapper div supercede any properties that I put in these divs? There's something I just don't get about CSS. Everytime I start a page, I can't get things like I want them.

  2. #2
    SitePoint Member reh3363's Avatar
    Join Date
    Aug 2004
    Location
    Las Vegas, NV
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a couple examples that may help you

    Here are a couple sites that have css layout examples for many different purposes. These are some of the examples I learned from a few years back.

    Layout Reservoir
    CSS Layout Techniques

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I want to put 3 fixed width, variable height divs inline
    Well you can't put divs inline because then you can't apply widths to them (you could use display:inline-block but its not widely supported yet).

    What you need to do is float the divs next to each other. If they are fixed width and you don't want them to wrap when the the screen is resized then they can be contained in a fixed width outer.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer{
    width:606px;
    }
    .inner{
     float:left;
     width:200px;
     border:1px solid #000;
     background:red;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div class="inner">Float 1</div>
      <div class="inner">Float 2</div>
      <div class="inner">Float 3</div>
    </div>
    </body>
    </html>
    will properties of a wrapper div supercede any properties that I put in these divs
    The properties you put on the outer will cascade down to the children unless you have specifically targetted the children with different styles. Some things aren't inherrited (such as background :color etc) but most properties are. I'm not quite sure what you are getting at but if you set the text in #outer to yellow then the text in the inner floats will be yellow also (however anchors in the inner will be their default colour and will need to be styled directly as they don't inherit from a parent element because they are special pseudo classes).

    Heres some useful links abdout inheritance and specifity that you may wish to read at your leisure


    http://www.westciv.com/style_master/...heritance.html
    http://www.w3.org/TR/REC-CSS1#cascading-order
    http://www.meyerweb.com/eric/css/link-specificity.html

    Paul

  4. #4
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I successfully used inline divs on my community site, but when I tried it on a new site, it wouldn't work. But this is a site with new classes, different properties on the body and wrapper divs, etc. I think I'm going to have to resort to a book for CSS. I have trouble focusing when I read long text on a monitor, so maybe that is my problem.

    I asked a question the other day about my footer background showing up at the top of the page, when my text was at the bottom, and Paul told me to use clear:both. I had never used that before and never had a problem with my footers, so why did I have to use it in that situation? That's the kind of stuff I don't understand. Maybe I just need a big book of definitions and properties for CSS that will detail everything they affect, and how to remedy problems. I didn't have half this much trouble learning PHP.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    and Paul told me to use clear:both. I had never used that before and never had a problem with my footers, so why did I have to use it in that situation
    Perhaps a good book would help you lol

    CSS has rules and even if the browsers get them wrong sometimes its still good to know how things should work. The clear property was designed for clearing floated elements as floats are removed from the flow in the normal sense. However IE will on occasion clear floats automatically if the parent of the float has a height defined.

    However a footer will only clear a float if it has clear:both defined or if it just happens not to fit alongside the float anyway.

    The rules are pretty straightforward and once you know how things are supposed to work then it makes a lot more sense as you understand whats happening and how to correct it. It's when you don't understand whats happening that problems occur because you won't know how to fix it and blame css instead. I think all of us have been there at some time

    Paul


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
  •