Stretch UL to width of screen

HTML & CSS
1

Hello, Can someone please help me keep the list centered on the page, while making the first and last item stretch to the end of the screen. Is that possible?

 
<!-- stretched width of left margin-->
<li id="first" style="background-color:green;width: 100%;">
<a href="#">First </a></li>
<!-- centred fixed width-->
<li id="second" style="background-color:yellow;width: 220px;">
<a href="#">Second</a></li>
<!-- centred fixed width -->
<li id="third" style="background-color:red;width: 220px;">
<a href="#" >Third</a>
</li><!-- stretched width of right margin-->
<li id="fourth" style="background-color:blue;width: 100%;">
  <a href="#">Fourth</a>
</li>

Many thanks in advance

2

That 100% there will only stretch the LI to the width of the parent container. You can use negative left/right margins to stretch it further, but CSS can’t tell how far left and right it will need to stretch. For that, you’d need a bit of JS. PPK does something similar on his site: http://www.quirksmode.org/js/strings.html (notice how his <pre> elements stretch to the edge of the window on both sides).

3

Hi,

Not really sure what you want to happen there but the second and third items could be centred with margin:auto.


#second,#third{margin:auto}

Or did you want all text items centred and full-width colours?

4

many thanks for your replies.

Here is another graphic if it explains it anybetter:

5

Yes that makes it clearer :slight_smile:

Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
h1 { text-align:center; }
ul.stretch {
	margin:0;
	padding:0;
	width:100%;
	display:table;
	background:green;/* the left stretech colour*/
	display:inline-block;
	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit) - unlike negative margins words will never overlap even if zoomed*/
	text-align:center;
	position:relative;
	overflow:hidden;
}
ul.stretch:after {
	content:" ";
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	right:0;
	background:blue;/* the right stretch color*/
	z-index:1;
}
.stretch li {
	display:inline-block;
 *display:inline;/* ie6/7 fix*/
 *zoom:1.0;/* ie6/7 fix*/
	vertical-align:middle;
	word-spacing:0; /* reset from parent */
	width:150px;
	z-index:2;
	position:relative;
}
.stretch a {
	display:block;
	width:150px;
	color:#fff;
	text-decoration:none;
	line-height:30px;
}
li.one { background:green }
li.two { background:yellow }
li.three { background:red }
li.four { background:blue }
</style>
</head>

<body>
<h1>Centred list with stretch - IE7+</h1>
<ul class="stretch">
		<li class="one"><a href="#"> Link 1</a></li>
		<li class="two"><a href="#"> Link 2</a></li>
		<li class="three"><a href="#"> Link 3</a></li>
		<li class="four"><a href="#"> Link 4</a></li>
</ul>
</body>
</html>

It may look a little odd when it wraps so you may want to have all 4 links coloured differently to the stretch.