CODEWITHSUNDEEP
htmlcss
mars-o
mars-o

Reputation: 1715

<div> border does not enclose all of the div's elements

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

Upvotes: 1

Views: 7355

Answers (4)

Cool Hand Luke
Cool Hand Luke

Reputation: 2140

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" />

Upvotes: -1

paxdiablo
paxdiablo

Reputation: 881113

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>

Upvotes: 1

Rex M
Rex M

Reputation: 144112

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.

Upvotes: 1

John Boker
John Boker

Reputation: 83699

See if adding the clearfix class to your div fixes anything

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

Upvotes: 7

Related Questions