CSS - Problems Expanding A Div To Fill Horizontal Space

http://www.ilumos.co.uk/site/
http://www.ilumos.co.uk/site/styleDefault.css

Ok, I'm trying to make a page layout for my site, and on the left I have a navigation bar (#sidebar), which I'd like to fill the whitespace between it and the footer (#footer) (but not dissapear behind the footer, height: 100%). I'd also like to fill the whitespace between the left of the main (#main) div and the edge of the page, and the whitespace under the div too.

If there's a non-hacky solution to this I'd love to hear it, but if there isnt, and there's a way to change my CSS/HTML to get the same result I'd still be interested.

Thanks loads,

ilumos

Argh. Tried a number of variations on this probably simple task. Nonetheless:

In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does)

http://www.mandgweb.net/css_test/css_test.html


Thank you

any body know what i need to add to this CSS to get the 2px looking white space that sits to the left of each <li>?

Code:

<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">View Cart</a></li>
</ul>

Code:

#navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid black;
background-color: #D5DED9;
}

EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks

Please take a look at this page:

http://www.4xp.net/template2/

I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF.

Here is my css

PHP Code:
 body {
    margin-top: 5px;
    margin-bottom: 5px;
    background-image: url('images/bg.jpg');
}

#header {
    width: 900px;
    height: 90px;
    padding: 0;
    margin: 0;
    text-align: left;
    background-image: url('images/header_bg.jpg');
}

img {
    padding: 0;
    margin: 0;
}

#menu {
    border-top: 1px solid #003366;
    border-bottom: 1px solid #003366;
    width: 100%;
    height: 25px;
    background: url('images/menu_bg.jpg');
    background-repeat: repeat-x;
    text-align: left;
}

.menulink {
    margin-left: 20px;
    height: 25px;
}

#page {
    width: 900px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#status {
    width: 900px;
    height: 25px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #003333;
    margin: 0;
    padding: 0;
    border: 0;
} 





Any help would be very much appreciated. Thanks everyone!

Hi,

I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu.
If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image.

How do I insert an image here ?
http :// imageshack.us/photo/my-images/600/44485569.jpg/


this is css code

body {
margin: 0;
padding: 0;
border: solid 1px black;
}

#nav {
position: relative;
margin: 0px auto;
width: 960px;
padding: 10px 0px 10px 0px;
border: solid 1px red;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: Georgia;
font-size: 21px;

}

ul a {
text-decoration: none;
padding-left: 25px;
padding-right: 25px;
display: block;
color: #843bbb;
}

ul a:hover {
color: #bd66ff;
}

ul a:visited {
color: orange;
}

li {
float: left;
}

How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ?

Thanks.

I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect).

I've got two problems in IE that can be viewed he
http://www.windrivers-gsp.com/test/index.php

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/* Document Formatting */
html {	width:100%;}

body, tr, th, td, p {	font-family:Verdana, Arial, Helvetica, sans-serif;
						font-size:1em;
						color:#000000;
						margin:0px;
						padding:0px;
						}

#navigation	{	position:relative;
				background:url(design/menubar.gif) #009933;
				background-repeat:repeat-x;
				width:100%;
				height:30px;
				text-align:center;
				display:block;
				}

#nav2	{	position:absolute;
			left:50%;
			width:628px;
			margin-left:-314px;
			}

#container	{	position:relative;
				max-width:1400px;
				min-height:400px;
				overflow:visible;
				margin-left:auto;
				margin-right:auto;
				border-bottom:1px solid #666666;
				padding:15px 10px 10px 10px;
				z-index:2;
				}

#content	{	font-size: 1em;
				margin-right:36%;
				overflow: visible;
				background: #FFF;
				text-align: left;
				height: auto;
				padding-right:10px;
				}

#rightpane	{	font-size: 1em;
				float:right;
				margin-top:0;
				width:35%;
				overflow: visible;
				text-align: left;
				height: auto;
				}

#fixcont	{width:100%;float:left}

/* PIE/Aslett Clear Fix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
			
/* New Navigation Menu Styling */

#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}

#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}

#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}

#menu h2:hover {background-position: 0 30px;}

#menu a {color: #000; text-decoration: none;}

#menu ul ul a {font-size:.8em; background-color:#a4906d;}

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

#menu ul li {position: relative;}

#menu ul ul {position: absolute; z-index: 10;}

div#menu ul ul {display: none;}

div#menu ul li:hover ul {display: block;}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
        <style type="text/css" media="all">
        body { behavior: url(csshover.htc); font-size: 100%;} 
        #menu ul li {float: left; width: 100%;}
        #menu ul li a {height: 30px;} 
        #menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;} 
        </style>
<![endif]-->
	<meta http-equiv="Content-Language" content="en-us" />
    <meta name="title" content="Test Menu" />
    <meta name="Publication_Date" content="09/07" />
    <meta name="robots" content="ALL" />
    <meta name="revisit-after" content="2 weeks" />

    </head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
  <li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Two</a></h2>
    <ul>

      <li><a href="index.php">Page 2.1</a></li>
      <li><a href="index.php">Page 2.2</a></li>
      <li><a href="index.php">Page 2.3</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Three</a></h2></li>

</ul>
<ul>
  <li><h2><a href="index.php">Page Four</a></h2>
    <ul>
      <li><a href="index.php">Link 1</a></li>
      <li><a href="index.php">Link 2</a></li>
      <li><a href="index.php">Link 3</a></li>
    </ul>

  </li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>

Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right.

In FF everything looks good, of course. Any ideas?

I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page:

http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html

If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE.

As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box.

Here's my <hr> definition in the css:
hr
{ border: 0;
color: #D5D5D5;
background-color: #D5D5D5;
height: 1px;
text-align: left;
padding: 0px;
margin: 0px;
}

Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks!

Hi all,

I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7.

The li tag css is

Code:

li{
 	background:url('../images/li_bg.gif') repeat-x #ff0000;
 	display:inline;
 	padding:0 5px 0 5px;
 	margin:0 2px 0 0;
 }

List html is:

Code:

<ul>
	<li><a href="member.php">Home</a></li>
	<li><a href="profile.php">Profile</a></li>
	<li><a href="help.php">Help</a></li>
	<li><a href="logout.php">Logout</a></li>
</ul>

I reset margin and padding for all other tags in a general css file.

The image is a 1px width gradient.

Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin.

Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space.

Have seen plenty of navbar tutorials but not with margin between list elements.

Any help is much appreciated...

Hello, if you go to: http://tombraiders.net/katie/Site/index.html

you'll see that the items in the menu aren't spaced evenly. I've tried to put some padding underneath but it doesn't appear to be working. I would like it if they were all evenly spaced, because some of the text (where there's two lines of text) is quite cramped.

The CSS file can be found here

Thanks!

Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors.

A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid.

Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures.

Here's the HTML involved:
Code:

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
  
  </div>

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
  
  </div>

<div class="node">

      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
  
  </div>

And the CSS as well....
Code:

.node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
 
}
 
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
 
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0; 

I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??).

Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well.....

Hi,

I dont have much hair left as I've been trying to sort this problem with no success for some time.

I feel it shold be quite straight forward but I'm pretty new to css.

The page can be seen at -

http://www.clivesefton.co.uk/temporary-files/index7a.html

It's utilising external css and js files -

http://www.clivesefton.co.uk/temporary-files/css/navlist7a.css
http://www.clivesefton.co.uk/temporary-files/drop_down.js

This appears fine in IE6, Mozilla, Opera but the drop-downs have white space and are strangely spaced in IE5.

Any help would be appreciated, thank you.

Hello,

I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide.

This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar.

Any idea how I can make the box expand with my content?

here is a link to my test page. http://www.gamerunion.com/test.html

My css code.

Code:

div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}

HTML

Code:

<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
    <div id="tlcorner"><span>top left corner</span></div>
    <div id="trcorner"><span>top right corner</span></div>
    <div id="blcorner"><span>bottom left corner</span></div>
    <div id="brcorner"><span>bottom right corner</span></div>
    <div id="tptile"><span>top side tile</span></div>
    <div id="lftile"><span>left side tile</span></div>
    <div id="rttile"><span>right side tile</span></div>
    <div id="btmtile"><span>bottom side tile</span></div>
    <div class="content">
    <div id="nav">
		<ul>
			<li><a href="/" class="current">Home</a></li>
			<li><a href="/about.html">About</a></li>
			<li><a href="/forum/">Forum</a></li>
			<li><a href="/resources.html">Resources</a></li>
			<li><a href="/contact.html">Contact</a></li>
		</ul> 
	</div>
        
        <h1>Gamerunion</h1>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
               
    </div>
</div>
</body>

Ok, I'm rather new to CSS and there is one thing I have always struggled with. If you have a containing div and two divs inside, is there a way to make one of the divs extend to fill the remainder of the space in the containing block. I have had times when I've wanted to do this both width-wise and height-wise.

A width example would be if you had a containing block with a width of 500px and two divs floated next to each other. The first div is 100px wide. Is there a way to have CSS automatically set the other div to 400px without manually setting it?

A height example would be if you have four divs in a containing div, stacked in two columns. The content in the left column is longer than the content in the right column. Now, is there a way to stretch the bottom div in the right column to fill the space down to the left column?

Pretty Common issue.... I think...

I need my div's background to go all the way down the page.... even on small pages!!

Here is an example...

Sign Up Page