Page element won't stretch { width:100% }

Hey guys.

I am absolutely stumped.

I have a navigation background that is supposed to do width:100%;

When it’s but itself, it works as planned.

When I put a <ul> inside of it, it doesn’t work.

At this point, I’m certain it’s something incredibly stupid that I’m over-looking.

Does anyone see anything wrong?


<body>
	
		<div id="stretch">
		
			<div id="header">
			
				
				
					<ul id="main-nav" class="contain">
						<li class="nav-logo"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Geek Getting Fit" id="logo" /></a></li>
						<li class="nav-item"><a href="#">rules</a></li>
						<li class="nav-item"><a href="#">goals</a></li>
						<li class="nav-item"><a href="#">archives</a></li>
						<li class="nav-item"><a href="#">contact</a></li>
						<li class="nav-search"><?php/* include (TEMPLATEPATH . '/searchform.php');*/ ?></li>
					</ul>
				
				
				
			
			
			</div>
</div>
</body>

CSS:


/*******TAGS AND ELEMENTS*******/

body { background: url(../../images/bg.jpg) repeat; font-family: Helvetica, Arial, sans-serif;  }


/*******STRUCTURE*******/

#stretch { width: 100%; /*overflow: visible;*/ }
.contain { width:960px!important; margin: 0 auto; }


/* HEADER */

#header { width: 100%; height: 70px; background: url(../../images/header.png) repeat-x; padding: 1px 0px; }

#main-nav { height: 70px; }

Thanks,

–thesprucegoose

Hi,
I suspect we are missing some styles here that are relevant to your problem. Since I don’t have the images you are working with I set up some BG colors and I don’t see any problems with the 100% widths.

We are missing the UL and LI styles so it could possibly be something related to that. Hard to say at this point since this test case below works with BG colors.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#stretch {
    width: 100%;
    background:red;
    padding-bottom:20px;
}
#header { 
    width: 100%; 
    height: 70px;
    background:lime; 
    padding: 1px 0px;
}
#main-nav { 
    height: 70px; 
}
.contain { 
    width:960px; /* use !important with caution*/
    margin: 0 auto; 
    background:yellow;
}
</style>
</head>
<body>

<div id="stretch">        
    <div id="header">            
        <ul id="main-nav" class="contain">
            <li class="nav-logo"><a href="#"><img src="/images/logo.png" alt="Geek Getting Fit" id="logo" /></a></li>
            <li class="nav-item"><a href="#">rules</a></li>
            <li class="nav-item"><a href="#">goals</a></li>
            <li class="nav-item"><a href="#">archives</a></li>
            <li class="nav-item"><a href="#">contact</a></li>
            <li class="nav-search">searchform.php</li>
        </ul>            
    </div>
</div>

</body>
</html>

There are no styles on the <ul> and <li>

It’s literally as barebones as possible.

I do have the Eric Meyer Reset CSS in place, but disabling that did nothing for the width issue I’m having.

This was a screen shot of the problem before I start tearing the site apart.

Still not working :frowning:

Post a link to your page if it is online, otherwise we are at a standstill without your images and complete code.

EDIT:

I think I know what your problem is, you just need to add min-width:960px to your stretch div.

#stretch { width: 100%; min-width:960px }

We discussed this recently in This Thread

Seems topic creator got it figured out, sadly I have same problem. I tried min width parameter, but no luck, you can check site here:

#1 I`m willing to make the part that says " * Torrenti
* Noteikumi
* FAQ
* FAQ
* FAQ
* FAQ
* FAQ
"
continue until the end of green <div> even if there is not enough items in menu (so links would just use a bigger width not use a constant width and leave free space on the right side).

#2 Also there is this thing about green table and menu. Code is like this


<div class=menu>
.....
<div id="menju">
            <ul>
<li><a href="index.php" class="current">link</a></li>
                <li><a href="signup.php">link</a></li>
                <li><a href="recover.php">link</a></li>
                <li><a href="browse.php">link</a></li>
                <li><a href="rules.php">link</a></li>

            </ul>
            
    </div>
<table height="55" border="0">
</table>
</div>

i put in table with 55 height because if i do not the green div ends before menu and not after even if menu is within the div.

That is because you are floating the li items, which removes them from the flow of the document, which makes the ul collapse (because now it thinks it doesn’t have anything inside of it)

If you add

div#menju ul {
  overflow: hidden;
}

that will cause your ul to contain your floated li.

You can then remove the <table>

:slight_smile: Hope that helps

Huh, materialdesigner, great! Thanks!
Just perfect :slight_smile: