My navigation breaks my wrapper.

tigerslicer · September 8th, 2007, 03:12 PM

I am having a bit of a problem with my website. When the navigation bar on the side is longer than my content the navigation bar breaks the border of my wrapper. I would like for the wrapper to stretch down to accommodate the sidebar. Can anyone think of a css solution to this problem? Should I just put some <br> tags in my content div to stretch the wrapper? Thanks in advance.

http://www.tigerslicer.com Example of how it should be.
http://www.tigerslicer.com/example Example of it being broken.

drd · September 9th, 2007, 11:34 AM

maybe try extra padding at the bottom of the wrapper

Lchad · September 9th, 2007, 12:15 PM

You've got a few situations.

The first thing you can try is adding this code to your wrapper div.

overflow: hidden;

If that doesn't do it, I'd suggest you do a more traditional layout. Lose the absolute positioning.

Here's an example of what could be done:
css

Code:

body{

    background-color:#ec7;

    font-family:"Arial Black";

    font-size:.8em;

}

img{

    border:0 none;

}

#wrapper{
    width:90%;
    background:white;
    margin:auto;
    border:dashed 2px #940;
    padding:1em;
    overflow: hidden;
}

#header{

    height:100px;

    width:380px;

    margin:auto;

    text-align:center;

}

#content{
    color:#940;
    margin-left:2em;
    width:75%;
    float: right;
}

#right{
    top:10em;

    left;10em;
    width:15em;
    background-color:#ec7;
    color:#940;
    margin:1em;
    line-height:2;
    float: left;
}



#new{

    color:blue;

    font-size:1.1em;

    font-weight:bold;

    border:dashed 2px #940;

}



#quickversion{

    border:dashed 2px #940;

    margin:2em;

    

}

http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-0106014414817746&dt=1189353904718&lmt=1189353904&format=120x240_as&output=html&correlator=1189353904718&url=http%3A%2F%2Fwww.tigerslicer.com%2Fexample&color_bg=EECC77&color_text=0066CC&color_link=0066CC&color_url=0066CC&color_border=994400&ad_type=text_image&ref=http%3A%2F%2Fwww.webforumz.com%2Fcss-forum%2F58102-my-navigation-breaks-my-wrapper.htm&ui=rc%3A10&cc=100&ga_vid=1383992.1189353905&ga_sid=1189353905&ga_hid=236591689&flash=9&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=-240&u_his=1&u_java=true&u_nplug=28&u_nmime=110
Embedded Styles from http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-0106014414817746&dt=1189353904718&lmt=1189353904&format=120x240_as&output=html&correlator=1189353904718&url=http%3A%2F%2Fwww.tigerslicer.com%2Fexample&color_bg=EECC77&color_text=0066CC&color_link=0066CC&color_url=0066CC&color_border=994400&ad_type=text_image&ref=http%3A%2F%2Fwww.webforumz.com%2Fcss-forum%2F58102-my-navigation-breaks-my-wrapper.htm&ui=rc%3A10&cc=100&ga_vid=1383992.1189353905&ga_sid=1189353905&ga_hid=236591689&flash=9&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=-240&u_his=1&u_java=true&u_nplug=28&u_nmime=110

a:link,a:visited,a:hover,a:active{color:#0066cc;cursor:pointer;}body,table,div,ul,li{font-size:10px;margin:0px;padding:0px}body{background-color:transparent;font-family:arial,sans-serif;height:100%}#aus{height:240px;width:120px}#ads{left:3px;position:absolute;top:19px;width:114px}#ads ul{list-style:none;}#ads ul li{clear:both;cursor:pointer;float:left;height:220px;overflow:hidden;width:114px}.ad{margin:0px 2px}.adt{font-size:13px;font-weight:bold;line-height:14px;}.adb{color:#0066cc;display:block;font-size:13px;line-height:14px}.adu{color:#0066cc;font-size:10px;line-height:14px;overflow:hidden;white-space:nowrap}.adc{width:100%;height:220px;table-layout:fixed;overflow:hidden}#att{left:1px;position:absolute;top:1px}#att ul{height:18px;list-style:none;width:92px}#att ul li{float:right}#abgf{background-color:#994400;height:18px;width:56px}#abgt{height:18px;position:relative;width:18px}#abgi{left:2px;position:absolute;top:2px}#aubg{background-color:#eecc77;border:1px solid #994400;display:none;height:238px;width:118px}.bg{background-color:#eecc77;border-color:#994400;border-style:solid;border-width:0px;height:18px;position:absolute;width:18px}#tlc{background-color:#994400;border-left-width:1px;border-top-width:1px;left:0px;top:0px}#trc{background-color:#EECC77;border-right-width:1px;border-top-width:1px;left:101px;top:0px}#blc{background-color:#EECC77;border-bottom-width:1px;border-left-width:1px;left:0px;top:221px}#brc{background-color:#EECC77;border-bottom-width:1px;border-right-width:1px;left:101px;top:221px}#bgtf{border-top-width:1px;left:19px;top:0px;width:82px}#bgbf{border-bottom-width:1px;left:19px;top:221px;width:82px}#bgcf{border-left-width:1px;border-right-width:1px;height:202px;left:0px;top:19px;width:118px}

#tlc .rc_bg div{background-color: #994400}

#tlc .rc_border div{background-color: #994400}

#trc .rc_bg div{background-color: #EECC77}

#trc .rc_border div{background-color: #994400}

#blc .rc_bg div{background-color: #EECC77}

#blc .rc_border div{background-color: #994400}

#brc .rc_bg div{background-color: #EECC77}

#brc .rc_border div{background-color: #994400}

#abgt .curve div{background-color: #994400}

HTML

Code:

<div id="wrapper">
        <div id="header">
            <a href="/"><img src="owenthought.jpg" alt="Owen's Thoughts Banner"></a>
    </div><div id="right">
            <ul>
                <li><a href="contact.html">Contact Info</a></li>
                <li><a href="aboutme.html">About Me</a></li>
                <li><a href="whatisit.html">What is Tigerslicer?</a></li>
                <li><a href="ridiculous.html">Ridiculous</a></li>

                <li><a href="backtrack.html">Back on Track</a></li>
                <li><a href="byu.html">BYU</a></li>
                <li><a href="time.html">Time has Come</a></li>
                <li><a href="home.html">Home</a></li>
            </ul>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <script type="text/javascript"><!--
google_ad_client = "pub-0106014414817746";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "994400";
google_color_bg = "EECC77";
google_color_link = "0066CC";
google_color_text = "0066CC";
google_color_url = "0066CC";
google_ui_features = "rc:10";
//-->
</script>

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </div>

        <div id="content">
            <h1>Look at this mess</h1>

            <p>See ho it goes?</p>
            <div id="quickversion">
                <h2>Quick Version!</h2>
                <ul>
                    <li>Second-hander. Expletive.</li>
                    <li>One time I out a language filter on my browser that put stars in place of any swear words. I replaced them all in my head with the worst words imaginable. Haha.</li>
              </ul>

          </div>
  </div> 
        
</div>
</body>
</html>

tigerslicer · September 9th, 2007, 02:52 PM

Thank you so much that totally solved my problem.
I put in the overflow:hidden and turned off the absolute positioning and floated my content div and now it works great! I didn't even have to change any of my html.

Here is my new CSS:

Code:

body{
    background-color:#ec7;
    font-family:"Arial Black";
    font-size:.8em;
}
img{
    border:0 none;
}
#wrapper{
    width:90%;
    background:white;
    margin:auto;
    border:dashed 2px #940;
    padding:1em;
    overflow: hidden;
}
#header{
    height:100px;
    width:380px;
    margin:auto;
    text-align:center;
}
#content{
    color:#940;
    margin-left:2em;
    width:80%;
    float: right;
}
#right{
    top:10em;
    left;10em;
    width:15em;
    background-color:#ec7;
    color:#940;
    margin:1em;
    line-height:2;
}

#new{
    color:blue;
    font-size:1.1em;
    font-weight:bold;
    border:dashed 2px #940;
}

#quickversion{
    border:dashed 2px #940;
    margin:2em;
    
}

Lchad · September 9th, 2007, 04:15 PM

That's GREAT! Any questions??

tigerslicer · September 9th, 2007, 10:06 PM

Yeah actually. Can you explain what the overflow:hidden; part does. I looked it up and it didn't make much sense.

Lchad · September 10th, 2007, 06:58 AM

The overflow portion of the code makes any of the content that is longer than the box, push the box(wrapper) down.. Expands it. The hidden portion says, "do not show a scroll bar"!