This is my first website, so I'm pretty unable to help myself. I've tried to make a left-floated side menu bar take a height of 100% and it works until the elements next to it grow to a certain size, at which point the 100% seems to cut off, allowing un-floated text to wrap underneath it.

Additionally, there seems to be a default for the space the 100% takes up when there's a small amount of text as well; as when there's very little text on the page, the bar will continue down for a while.

The div element that the sidemenu is nested in is a direct descendant of the which has no set height. Here is the relevant, I hope, portion of the html:

<html>

    <head>
        <title>Dockspace411.com</title>
        <link rel="stylesheet" type="text/css" href="dock411_stylesheet.css" />
    </head> 

    <body>

    <!--Title-->
        <div id="header">
            <h1> 
                <a href="dock411_home.htm">Dockspace411.com
                    </a>
            </h1>

            <p id="address"> Our Address <br />
                Goes Here.
            </p>
        </div>

    <!--Side Menu-->        
        <div id="sidemenu">Services <br />
                <!--removed the <br /> after every <a></a> line-->
            <a href="dock411_home.htm">Home
                </a>
            <a href="dock411_btownrs.htm">Boat Owners
                </a>
            <a href="dock411_dckownrs.htm">Dock Owners
                </a>
            <a href="dock411_ournghbrhd.htm">Our Neighborhood
                </a>
            <a href="dock411_abtus.htm">About Us
                </a>            
            <a href="dock411_cntcts.htm">Contact Us
                </a>
        </div>

And the relevant portion of the CSS:

html {
background: #ffffff url(banner.png) repeat-x;
}
body {
font-size: 90%;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}

#sidemenu {
float: left;
background-color: #c5f3bc;
width: 170px;
height: 100%; /*needs to be made a pixel height*/
margin: 0 20px 0 0;
/* this might be temporary; 
if so, then replace the bottom margin with 100% */
padding-bottom: 100%;
padding-top: 10px;
}
#sidemenu a {
display: block;
background-color: #eaf581;
padding: 10px 20px 5px 5px;
}
#sidemenu a:hover {
font-weight: bold;
}

For the record, going to the referred-to address in the HTML won't provide the markup as this is going to be uploaded once I finish the presentation. If you want a link with the mark up, go to http://www.addisontaylor.com/addison/dock411_home.htm.

Please help me. Thank you!

1 answer

2
points

It looks like you're trying to get two columns with the left hand one being coloured all the way down the window, regardless of content?

if so the best way to do that (because 100% height doesn't work the way you think it should) is with the 'faux column' technique.

You have a container div with a background image and float two divs within it.

read all about it here: http://www.alistapart.com/articles/fauxcolumns/

Answered about 7 years ago by Tony Crockford
  • So I tried reading this article, but am still a little lost. Can I do this without the use of back ground imgs? I mean that's sorta complicating what I wanted to try keeping simple. Dansid Altroyo about 7 years ago
  • Never mind, I went the image route and got it to work properly. Thank you! Dansid Altroyo about 7 years ago