tags:

views:

1441

answers:

4

i'm now starting designing with proper mark-up and organization. and now, i have problem with my div border. it does not enclose all ot the div's content.

this is my html snippet:

  <div id="paneMiddle"> 
  <div id="subPaneLatestItems">
        <p id="latestItemsTitle">Latest Shop Items:</p>
        <div>
        <img src="img/flower1.jpg" />
        <span id="itemName">Ballpen</span>
        <br/><span id="itemPrice">Php 90.00</span>
        </div>
     </div></div>

and here's my css:

div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}

why doesn't this work? thanks

+5  A: 

See if adding the clearfix class to your div fixes anything

http://www.webtoolkit.info/css-clearfix.html

John Boker
clearfix solved this problem. thanks.
bgreen1989
@bgreen1989 im glad it worked, want to mark this as the answer? :)
John Boker
+1  A: 

Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.

Also, important to point out that the > direct descendant selector is not supported in IE.

Rex M
+1 Good point re the direct descendant selector. While it is a nice piece of functionality, you cannot ignore IE if your site is public.
Chris Ballance
no, flower1.jpg is smaller.and i float:left the div containing flower1.jpg. does this matter?
bgreen1989
and the width is obviously a box-model problem for some IEs
annakata
A: 

Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?

Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?

<html>
    <head>
        <style type="text/css">
            div#x{
                float:left;
            }
            div#paneMiddle>div{
                /*All divs that are children of div#paneMiddle*/
                width:590px;
                margin:5px 5px 5px 5px;
                position:relative;
                border-color:#FFCC33;
                border-style:solid;
                border-width:thin;
                position:relative;
            }
        </style>
    </head>
    <body>
        <div id="paneMiddle"> 
            <div id="subPaneLatestItems">
                <p id="latestItemsTitle">Latest Shop Items:</p>
                <div id="x">
                    <img src="img/flower1.bmp" />
                    <span id="itemName">Ballpen</span>
                    <br/>
                    <span id="itemPrice">Php 90.00</span>
                </div>
            </div>
            <div id="subPaneLatestItems2">
                Hello
            </div>
        </div>
    </body>
</html>

Including the cleardiv fix (shown here) appears to fix the problem:

<html>
    <head>
        <style type="text/css">
            .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }
            .clearfix {
                display: inline-block;
            }
            html[xmlns] .clearfix {
                display: block;
            }
            * html .clearfix {
                height: 1%;
            }
            div#x{
                float:left;
            }
            div#paneMiddle>div{
                /*All divs that are children of div#paneMiddle*/
                width:590px;
                margin:5px 5px 5px 5px;
                position:relative;
                border-color:#FFCC33;
                border-style:solid;
                border-width:thin;
                position:relative;
            }
        </style>
    </head>
    <body>
        <div id="paneMiddle"> 
            <div class="clearfix" id="subPaneLatestItems">
                <p id="latestItemsTitle">Latest Shop Items:</p>
                <div id="x">
                    <img src="img/flower1.bmp" />
                    <span id="itemName">Ballpen</span>
                    <br/>
                    <span id="itemPrice">Php 90.00</span>
                </div>
            </div>
            <div id="subPaneLatestItems2">
                Hello
            </div>
        </div>
    </body>
</html>
paxdiablo
A: 

Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.

<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />
Cool Hand Luke UK