Border issues in CSS

HTML & CSS
1

In the attached HTML and CSS I am trying to get a border around the entire div called container. just applying the border didnt work so I have used the header and footer to get some of it in place but cant figure out how to get the left and right sides sorted. any assistance would be greatly appreciated.
Thanks
Hayden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Floren and Gilder - Beautiful handmade leather handbags and accessories</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name ="description" content ="Floren and Gilder handmade leather handbags and accessories" />
<meta name ="keywords" content = "luxury leather handbags handmade leather handbags belts accessories deer nappa wallets made to order handbags new zealand made leather handbags">
<link href="F&G.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">

            <div id="header">    
                    <!-- navigation -->
        <div id="navigation" class="mod">
          
          <div class="mod-main nav">
            <ul class="list-inline">
              <li><a href="gallery.html">Gallery</a>
              <!--  <ul>
                  <li><a href="">Bags</a></li>
                  <li><a href="">Belts</a></li>
                  <li><a href="">Accessories</a></li>

                </ul> -->
              </li>
              <li><a class="active" href="about.html">About Us</a>
              </li>
              <li><a href="contact.html">Contact Us</a>
              </li>
              <li><a href="blog.html">Blog</a></li>
            </ul>
          </div>
        </div>
        <!-- /navigation -->
                    <div id="logo">
                        <img src="images/Horse3.png" class ="feature" width="125" height ="83"/>
                    </div> <!-- end of logo div -->
                    <div id="SiteBranding">
                        <img src="images/branding.png" class ="feature" width="350" height ="50"/>
                    </div> <!-- end of SiteBranding div -->
            </div>    <!-- end of header div -->    
            <div id="AboutContent">
                <p>Floren and Gilder was born in 2006 from a desire to create beautiful, functional handbags, belts and other leather accessories.  Our products are designed and made to look great without pandering to the latest fashion fads.
<br>
<br>
Our construction techniques promote the original strength and beauty of the leather without tampering too much with the natural structure of the hide.  This also assists longevity of life for the product as it is given the best possible opportunity to improve on its beauty and develop its own patina the more it is used and loved.
<br>
<br>
All bags and belts are currently made to order. New designs and variations to those shown in the gallery are available upon request. Special and non fashion projects are also very welcome.
<br>
<br>
For further information please <a href="contact.html">contact us</a>.
<br>
<br>
Floren and Gilder 
<br>
Owner: Jude Stubbington
<br>
301 Middle Renwick Rd 
<br>
RD1 Blenheim 7271 
<br>
New Zealand
<br>
<a href="#">info@snip.com</a>
<br>
0064 (0)22 674 2260
</p>
            </div> <!-- end of AboutContent div -->
            <div id="SlimGall">
                <img src="images/aboutSlim.jpg" width="140" height="333" />
            </div> <!-- end of ImgGall div -->

        
            <div id="footer">
            </div> <!-- end of footer div -->
</div> <!-- end of container div -->
</body>
</html>

body {
background-color: #AAB29C;
padding:20px;
margin:0px;
text-align: center;
}
#container {
margin: 0px auto;
width: 752px;
text-align: left;
background-color: #92ad8b;
padding: 0px;
position: relative;

}

#ImgGall {
position: absolute;
left: 104px;
top: 105px;
padding: 4px;
}

#SlimGall {
position: absolute;
left: 606px;
top: 105px;
padding: 4px;
}

#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
height: 105px;
background-color: #92ad8b;
border-top: 2px solid  #446f60; 
border-left: 2px solid #446f60;
border-right: 2px solid #446f60;
}

#footer {
position: absolute;
left: 0px;
top: 498px;
width: 100%;
background-color: #92ad8b;
height: 35px;
border-bottom: 2px solid #446f60;
border-left: 2px solid #446f60;
border-right: 2px solid #446f60; 
}

#dims {
position: absolute;
left 0px;
top: 355px;
}

#SiteBranding {
position: absolute;
left: 105px;
top: 20px;
}

#logo {
position: absolute;
left: -7px;
top: 15px;
}

#BagName {
Position: absolute;
left: 105px;
top: 443px;
}

#BagDesc {
position: absolute;
left: 105px;
top: 453px;
}

#Enq {
Position: absolute;
top: 440px;
left: 500px;
}
#Prev {
Position: absolute;
top: 440px;
left: 606px;
}

#Next {
Position: absolute;
top: 440px;
left: 685px;
}

#gallery {
Position: absolute;
top: 65px;
left: 105px;
}

#about {
Position: absolute;
top:65px;
left: 170px;
}

#contact {
Position: absolute;
top:65px;
left: 230px;
}

#blog {
Position: absolute;
top:65px;
left: 300px;
}


#AboutContent {
position: absolute;
top: 100px;
left: 0px;
width: 605px;
padding: 3px;
}

#blogContent {
position: absolute;
top: 100px;
left: 0px;
width: 605px;
padding: 3px;
}
2

First of all if you want to set a visible border around the container, you need to set it’s border property. also, i suggest setting the beight to auto. finally, you will want to set overflow to hidden, in order to nicely keep your content within the border.

3

Hi,

The container div, though it’s the reference for its absolute positioned content, it can’t sense what size its AP content is. So you need to manually apply a height on the container.

OT,
It is easier to read posted code when it’s wrapped in code tags; just select pasted code and push the [#] button. :slight_smile:

4

have tried setting the border property as follows:
border: 2px solid black;
that and no joy, it adds a border on top but thats all. when I set overflow to hidden all of the content disappears???

5

I set height to a fixed value and it worked! thanks for your help
cheers
Hayden

6

Just so you know :).

The border you set was setting it on the top and bottom.

It just had no height (as you saw)

Overflow:hidden; will cut the content because…well technically all the content is hanging out of hte container :slight_smile:

Are you sure you need all that AP there? Seems awfully redundant.

7

I’m very new to all of this - how would I do it without AP?!!

8

Hi, i need to run but a quick glance at your code shows that you use AP for everything. This is a bad idea because AP is to fragile and will break your lay-out sooner or later. Ap should only be used for minor stuff (or best be avoid at all).

I suggest you redo the layout, using floats. Any problems, post the new code or a live url and we’ll get it fixed :slight_smile:

If you’re not all to familiar with floats, you can read up on them in the Faq