Learn VBA & Macros in 1 Week!

CSS - Having The Width Of The Element Wrap Around The Contents

Full Excel VBA Course - Beginner to Expert

Having The Width Of The Element Wrap Around The Contents	View Content

right now i have a div that is floated left. in Firefox, the width of the box depends on the contents. however, in IE, the width is 100% of the parent element. how can i make IE act like firefox in this situation?

Full Excel VBA Course - Beginner to Expert

Getting Div Contents To Wrap Sooner?

Similar Tutorials

View Content

Hi there!

Okay, I'm working on some CSS for a page that is heavily javascript-based, it's a simple search-utility I'm fooling around with for university coursework and simply loads some amazon results, and finds related eBay results for each one.

You can find the tool here (ignore any certificate warnings, I wouldn't recommend firing your credit-card details onto my site anyway =):
https://devweb2008.cis.strath.ac.uk/~isimms/MashUp/

It currently only works properly in FireFox 3 or Safari 4 (preferred), and kind of in Google Chrome. I don't care much about this just now so use one of the first-two if you do visit the page!

Now, once you enter a search (my typical one is "USB"), you'll get a list, on the left is the amazon image, and to the right of that is a "loading" div which will expand with some eBay results. Now, the problem I'm having is that if you shrink the window (or later on if more results are added) then the eBay box will wrap so that it is underneath the amazon image, before the results within the ebay box start wrapping. What I would like to do instead is have the eBay results wrap within their box, so the box stays to the right of the amazon image, while stretching downwards as required.

I can't think of any way to do this though without specifying a width which of course isn't something I want to do as the amazon image is a fixed size (otherwise it won't remain square), while the rest of the page is variable-width.

Anyone know what I'm getting at here and have any ideas how this could be done?

Word-wrap Using Max-width And Ie6

Similar Tutorials

View Content

I am trying to build a site with centered content that resizes with the browser window. Click here to see a test page of what I am doing.

Notice that this looks and functions beautifully in firefox/Opera. Notice that it functions semi-beautifully in IE. The fact that it even works in IE at all is a miracle because when I was searching for an answer to my problem I stumbled upon this:
PHP Code:
width:expression(document.body.clientWidth > 800? "800px": "auto" );

which allowed me to specify the max-width for my content.

Now what I would like to happen is when the browser window is resized, I would like the text to wrap to fit the window within the center content div. To see what I mean, view the page in firefox and narrow the width of your browser window and then try the same thing in IE.

Is there a way to make IE behave like firefox?

Here is my markup:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nova Electronics Dat, Inc.</title>
<link rel="stylesheet" type="text/css" href="styles/main_style.css" />
<link rel="stylesheet" type="text/css" href="styles/drop_down.css" />
<script type="text/javascript" src="scripts/javascript.js"></script>
</head>

<body>
    <div id="drop_down">
        <ul id="nav">
            <li id="first">
                <div><a href="">Link</a></div>
                    <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li id="last">
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
<div id="content">
    blah blah blah blah
        blah blah blah blah
</div>

</body>
</html>

and the relevant CSS (i left out the suckerfish menu CSS):
PHP Code:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
padding-top: 20px;
margin: 0;
color: #FFFFFF;
}

#content {
max-width: 800px;
background-color:#0099BB;
border: 6px double #999999;
padding: 0 1em;
voice-family: "\"}\"";
voice-family:inherit;
margin: auto;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}

html > body #content{max-width: 800px;}

Getting Word-wrap To Ignore Min-width?

Similar Tutorials

View Content

Two questions:

1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements?

2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div.

thanks

Font Size According To The Element Width

Similar Tutorials

View Content

Hello all

I need to display the Login info inside a DIV
'WELCOME <USER FIRST NAME AND LAST NAME>'
i have set the width of the DIV and a font size - 16px
but when the name length increases the design brakes

One way of solving the issue is by applying some logic using scripts

but i want to know that
whether we can do anything using the same with CSS only

Regards
Anees

Width Property Is Being Ignored On A Block Element

Similar Tutorials

View Content

the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored?

Thanks in advance!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Groups</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#navbar {
	position: relative;
	z-index: 10000;
}

#globalNavWrapper {
	position: relative;
	width: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	z-index: 10;
}

#globalNavWrapper #nav ul {
	list-style: none;
	z-index: 20;
}

#globalNavWrapper #nav li {
	float: left;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	display: inline;
	height: 24px;
}

#globalNavWrapper #nav li.navpadleft {
	border-left: 1px solid #999;
}

#globalNavWrapper #nav li a {
	display: block;
	background: #0f0 url(sprite.gif) no-repeat scroll 0%;
	height: 0;
	width: 100%;
	padding-top: 24px;
	overflow: hidden;
}

#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }

#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }

#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }

#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }

#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }

#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }

#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }

#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }

#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }

#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }

#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }

#globalNavWrapper #nav .subnav {
	position: absolute;
	margin: -1px;
	border: 1px solid #999;
	background: #fff;
	width: 150px;
	z-index: -10;
	display: none;
	overflow: hidden;
}

#globalNavWrapper #nav .subnav li {
	clear: both;
	float: none;
	display: block;
	background: none;
	line-height: 18px;
	height: 18px;
	width: 150px;
	list-style: none;
	border: 0;
}

#globalNavWrapper #nav .subnav li.hr {
	border-bottom: 1px solid #999;
}

#globalNavWrapper #nav .subnav li a {
	background: #fff;
	padding: 0 0 0 5px;
	width: 1000px;
	height: 18px;
	color: #000;
	text-decoration: none;
}

#globalNavWrapper #nav .subnav li a:hover {
	background: #e4f5e5;
	color: #009f00;
}

#globalNavWrapper #nav li iframe {
	display: none;
	z-index: -1000;
	height: 220px;
	width: 151px;
	-moz-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
</style>
</head>

<body>

	<div id="globalNavWrapper">
		<ul id="nav">
			<li id="nav_home" class="navpadleft">
				<a href="#">Home</a>
			</li>
			<li id="nav_myXXXX">
				<a href="#">My XXXX</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_people">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			<li id="nav_groups" class="active">
				<a href="#">People</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_tnn">
				<a href="#">News Network</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_green">
				<a href="#">Green Living</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_ecards">
				<a href="#">E-Cards</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_shopping">
				<a href="#">Shopping</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_petit">
				<a href="#">Petite</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
			<li id="nav_don">
				<a href="#">Don</a>
				<ul class="subnav">
					<li class="hr"><a href="#">Main</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page</a></li>
					<li><a href="#">Next Page Long Text</a></li>
					<li><a href="#">Next Page</a></li>
				</ul>
			</li>
		</ul>
	</div>

<script type="text/javascript">
	startList = function() {
		var navRoot = document.getElementById("nav");
		var is_MSIE = false;
		if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;

		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
				node.onmouseover = function() { this.className += " over"; }
				node.onmouseout = function() {
					this.className = this.className.replace(" over", "");
					this.className = this.className.replace("over", "");
				}

				for(j=0; j<node.childNodes.length; j++) {
					if(node.childNodes[j].nodeName=="UL"){
						if(is_MSIE) {
							var iframe = document.createElement('<iframe frameborder="0">');
							iframe.style.position = 'absolute';
							iframe.border = '0';
							iframe.frameborder = 0;
							iframe.style.backgroundColor = '#f00';
							iframe.src = 'about:blank';
							node.appendChild(iframe);
						}
					}
				}
			}
		}
	}
	startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.

	document.getElementById('nav').style.zIndex = 2000;
</script>

</body>
</html>

Ie 100% Width Of Select Element In Table

Similar Tutorials

View Content

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Styling HTML select elements</title>
	<style type="text/css">
		select {
			width: 100%;
		}
	</style>
</head>
<body>
<table>
	<tbody>
		<tr>
			<td>Test</td>
		</tr>
		<tr>
			<td>
				<select>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>
</body>

This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off.

Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS?

Span Element Width In Netscape

Similar Tutorials

View Content

I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights".

I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions?

My Element Is Not Taking Width And Height Instructions

Similar Tutorials

View Content

Layout Page

I know. It's not too great yet. But I've just started and it's still in the baby stages.

whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content!

Why is that?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">


<style type="text/css">

body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}

html {
height: 100%;
}

.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;

}

#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}

#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;

}

#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;

border-style: dotted;


}


</style>

<script type="text/javascript">
<!--

// -->
</script>
</head>


<body>

<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>

<div id="navBar">

alex wait




</div>

Variable Width Menu Items + Fixed Total Size + Filling Last Element

Similar Tutorials

View Content

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

Pushing The Positioning Of An Element Out Based On Content-length Of Earlier Element.

Similar Tutorials

View Content

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

Can You Position An Element Outside Its Parent Element, Relative To Something Else?

Similar Tutorials

View Content

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:

Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.

Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Flexible-width, Content-first Layout With Fixed-width, Equal-height Sidebar

Similar Tutorials

View Content

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

Fixed Width(pixels) Nav Menu And Changing Width(percetage) Content Div..help

Similar Tutorials

View Content

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

Width Of Absolutely Positioned <div> Constrained By Width Of Parent Container

Similar Tutorials

View Content

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div>

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

Fixed Width, Full Screen Width Footer

Similar Tutorials

View Content

I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen.

The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content.

Is there a way to get this effect?

Extend Table Width To Container Div's Width

Similar Tutorials

View Content

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:


/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

Table Column Width Determined By Css, But Not Row Width?!?!

Similar Tutorials

View Content

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

Setting A Min Width For A Non-fixed Width Design

Similar Tutorials

View Content

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html

Div Width Not Expanding To Fit Width Of Child Div - Ie7

Similar Tutorials

View Content

I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6.

Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further.

Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 
</head>
  <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
      <form id="frmMain" runat="server"> 
          <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">        
                      <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
                  <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                  </div> 
          </div>
      </form>
  </body>
</html>

Appreciate Any Help - Min-width Smaller Than Image Width.

Similar Tutorials

View Content

I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window.

I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left.

Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands.

Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background.

Full width:
|---------------------------------------|
|AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA|
|---------------------------------------|

Shrunk width:
------- |------------------------| --------
AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA
------- |------------------------| --------

Grey bit outside window edge.
| Window side
A Arms
H Hands
B Banner

I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks.