SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Bellevegas, IL
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border height not changing with content.

    I'm new to xhtml/css and I'm trying to add content with a right and bottom border. If I put text directly inside the html, the bottom horizontal border adjusts with the amount of text added. If I put the text into a right and or left content div, the lower horizontal boarder stays at a fixed height at the top. Can anyone help?

    http://www.jasonalanellis.com/jason/

    /* jasonalanellis.com stylesheet.css */

    * {
    border: 0;
    margin: 0;
    padding: 0;
    }

    #wrapper {
    text-align: left;
    width: 760px;
    margin-right: auto;
    margin-left: 0; /* change to auto to center body */
    font: bold large Arial, Helvetica, sans-serif;
    border: 1px dotted #CCCCCC;
    }

    #header {
    background: url('images/sub.gif') 0 0 no-repeat;
    height: 115px;
    }

    #rcontent {
    width: 25%;
    float: left;
    padding: 2em;
    padding-top: 2em;
    margin-left: 2em;
    }

    #rcontent p {
    font-size: 70%;
    line-height: 1.1em;
    padding-left: 2em;
    }

    #rcontent h1 {
    font: normal 110% Arial, Helvetica, sans-serif;
    color: #B51032;
    background-color: transparent;
    }

    #lcontent {
    width: 25%;
    float: left;
    padding: 2em;
    margin-left: 10em;
    }

    #lcontent p {
    font-size: 70%;
    line-height: 1.1em;
    padding-left: 2em;
    }

    #lcontent h1 {
    font: normal 110% Arial, Helvetica, sans-serif;
    color: #B51032;
    background-color: transparent;
    }

    #menu {
    position:relative;
    top: 4em;
    left: 1em;
    width: 10em;
    }

    #menu ul {
    list-style: none;
    margin-left: 1em;
    padding-left: 0;
    }

    #menu li {
    font-size: 95%;
    margin-bottom: 0.3em;
    }

    #menu a:link, #menu a:visited {
    text-decoration: none;
    color: #2A4F6F;
    background-color: #FFFFFF;
    }

    #menu a:hover {
    color: #EEEEEE;
    background-color:#CCCCCC;
    }

    #footer {
    clear:both;
    padding: 0 0 10px 255px;
    font-size: 90%;
    color: #CCCCCC;
    background-color:#FFFFFF;
    }

    ul.horiz li {
    list-style: none;
    display: inline;
    text-align: center;
    text-decoration: none;
    padding: 0.5em;
    color:#EEEEEE;
    background-color:#CCCCCC;
    }



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jasonalanellis.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="Keywords go here" />
    <meta name="description" content="A description of each page goes here." />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <span id="corner"><!-- --></span>
    </div>

    <div id="menu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="lcontent">
    <h1>Left Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pulvinar purus. Integer ante ligula, vulputate eu, elementum eu, laoreet vitae, nisi. Morbi sapien velit, feugiat ac, hendrerit sit amet, iaculis vitae, sapien. Suspendisse bibendum nunc fermentum sapien. Ut sit amet risus. Proin nonummy consectetuer ante. Nam euismod ante at arcu. Nulla facilisi. Fusce tellus risus, porttitor non, dictum at, dignissim at, purus. Vivamus libero urna, eleifend nec, ultrices accumsan, ultricies sed, arcu. Aenean ut nibh ut sapien ultricies congue. Sed adipiscing. Praesent turpis. Nulla facilisi. Nunc pulvinar porttitor ligula.
    Suspendisse mi urna, tempor nec, sodales id, porta dictum, sapien. Pellentesque turpis purus, dictum ut, vehicula a, iaculis quis, nisi. Nunc fringilla. Maecenas tortor. Vivamus viverra dolor a magna. Donec ipsum nisl, porttitor vitae, blandit in, auctor dictum, ante. Duis lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque eu tortor at sem hendrerit pellentesque. Suspendisse potenti. In lectus arcu, fringilla eu, ullamcorper a, mattis vitae, metus. Quisque velit nunc, varius vel, venenatis sed, rutrum vitae, metus. Fusce ut erat nec nisi vehicula pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nonummy eleifend dolor. Vestibulum iaculis hendrerit felis. Nam auctor. Pellentesque odio.
    </p>
    </div>
    <div id="rcontent">
    <h1>Right Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pulvinar purus. Integer ante ligula, vulputate eu, elementum eu, laoreet vitae, nisi. Morbi sapien velit, feugiat ac, hendrerit sit amet, iaculis vitae, sapien. Suspendisse bibendum nunc fermentum sapien. Ut sit amet risus. Proin nonummy consectetuer ante. Nam euismod ante at arcu. Nulla facilisi. Fusce tellus risus, porttitor non, dictum at, dignissim at, purus. Vivamus libero urna, eleifend nec, ultrices accumsan, ultricies sed, arcu. Aenean ut nibh ut sapien ultricies congue. Sed adipiscing. Praesent turpis. Nulla facilisi. Nunc pulvinar porttitor ligula.
    Suspendisse mi urna, tempor nec, sodales id, porta dictum, sapien. Pellentesque turpis purus, dictum ut, vehicula a, iaculis quis, nisi. Nunc fringilla. Maecenas tortor. Vivamus viverra dolor a magna. Donec ipsum nisl, porttitor vitae, blandit in, auctor dictum, ante. Duis lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque eu tortor at sem hendrerit pellentesque. Suspendisse potenti. In lectus arcu, fringilla eu, ullamcorper a, mattis vitae, metus. Quisque velit nunc, varius vel, venenatis sed, rutrum vitae, metus. Fusce ut erat nec nisi vehicula pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nonummy eleifend dolor. Vestibulum iaculis hendrerit felis. Nam auctor. Pellentesque odio.
    </p>
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add overflow:hidden; in #wrapper to enclose your floats.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Bellevegas, IL
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy moly. That fixed it. Thank you very much!


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
  •