|
CSS - 100% Nested Div Overflows From Container
How do I position a fluidly nested div inside a fluid container div but have the nested div 100px from each side? At the moment the nested div is fluid by applying 100% width, but that makes the nested div the same size as the container (instead of 100px smaller on each side) and ends up overflowing the container.
Without using overflow:hidden how am I supposed to nest it so it nests at the correct size? Code:
.container { position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%; }
.nest { position: absolute;
top: 0px;
left: 0px;
margin: 100px;
width: 100%;
height: 100%; }
Similar Tutorialshi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom]. Within the container, I have 2 main content elements: 1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable]. 2. the main content div is beside it. The container automatically adjusts to the height of the entire content in both divs. I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible? Kravvitz....I know How do you make a container div aware of the height of floated divs nested inside? I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically. In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to. Here is the link to the site with the problem. CSS Code:
/* CSS DOCUMENT */
html, body {
padding: 0px 0px 0px 0px;
font: 10px Verdana, Arial, Halvetica;
height: 100%;
text-align: center;
background: url(../images/bdy_back.jpg) #252525 no-repeat center;
#container {
width: 938px;
margin: 0 auto;
text-align: left;
height: auto;
opacity: .90;
filter: alpha(opacity=90);
background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
float: left;
width: 15%;
height: auto;
}
#right {
float: right;
width: 85%;
height: 100%;
}
}
HTML Code:
<div id="container">
<div class="hdr">
<div id="officer" style="display: none;"></div>
</div>
<div id="lcol">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
link Notice the right menu, the text goes outside the box. It works fine on the left, but I can't figure out why the right side does that. Hi this is the problem: I have a header div which has a transparent background. This is a set image of lets say 200px Under that i have a solid color div which needs to stretch vertically under that i have the footer which is under all of it. Above the header and the solid color (but not the footer) is the content. I need the solid color div to expand vertically as the content get bigger. In turn i need this to push the footer down. The issue is that the content which is above the solid color div and the header one cannot push the solid color divs height down. Heres what im working on... PHP Code: <style> #outer{ border:1px solid #000; width:600px; height:100%; left:0px; position:absolute; } .trans{ position:absolute; top:0px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; z-index:50; } #content{ position:absolute; top:0px; height:100%; width:100%; } .stuffcontent{ position:absolute; top: 0px; z-index:100; width:600px; z-index:100000; border:1px dashed #000; } .solid{ position:absolute; bottom:0px; height:100%; width:600px; background-color:#bed; z-index:10; } .footer{ position:absolute; bottom:-200px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; } </style> <div id="outer"> <div id="content"> <div class="stuffcontent"> <div style="z-index:99999999; position:relative; width:600px; height:100%; display:block;"> TEST---- TEST ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^TEST<br/> <div class="solid"> <!-- THIS SHOULD BE THE SOLID COLOR UNDER THE CONTENT--> </div> <div class="footer">Footer is after the content overflow</div> <div class="trans">Header : Transparent</div> </div> </div> </div> </div> I have been able to bodge a fix where the content is duplicated in a php ob buffer and then spat out again into another div. While setting the original div to hidden but keeping its height and using it as a container. This is well over drawn and i need a simpler fix. (This is not the above code please not) This is the site i have created. The content is over the transparent div and pushes the solid green div down untill it reaches the footer. The footer has a large height to cover any gaps. This was created using the ob buffer method but i need to do this in a simpler fashion. the site Heya Im having issues trying to keep text inside a div. At the moment the text just runs out of the div instead of starting a new line! html: Code: <body onLoad="goforit()" > <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Web Design</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a> <ul> <li><a href="http://www.finalonline.co.uk/" target="_blank">Link 1</a></li> </ul> </li> </ul> <br style="clear: left" /> </div> <div id="content"> <div id="header">Web Design</div> <div id="container1"> <div id="containermainleft"><img src="img/blue_gradient.jpg" /></div><div id="containermainright"><p>textooooooooooooooooooooooooooooooooooooooooooooooo<p></div> </div> </div> <div id="copyright">Designed and Maintained by Final Online</div> </body> css: Code:
/* Final Online CSS */
body {
margin:0; auto;
background-color: #A4D3EE;
}
#content {
background-color: #A9A9A9;
height: 100%;
width: 710px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
border: 1px solid white;
clear: both;
}
#copyright {
background-color: #414141;
width: 710px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
background-color: white;
width: 99%;
text-align: right;
padding-right: 1%;
padding-bottom: 0.2%;
margin-left: auto;
margin-right: auto;
font: normal 13px Arial;
}
#container1 {
background-color: red;
width: 85%;
height: 120px;
text-align: ;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
clear: both;
border-bottom: 1px solid white;
}
#containermainleft {
background-color: yellow;
width: 50%;
height: 110px;
text-align: ;
margin-top: 2px;
float: left;
border-right: 1px solid white;
}
#containermainright {
background-color: yellow;
width: 49%;
height: 110px;
text-align: ;
margin-top: 2px;
float: right;
}
img {
width: 200px;
height: 100px;
border: 1px solid white;
margin-top: 3px;
margin-left: 10px;
vertical-align: center;
}
p {
text-align: justify;
margin: 0px;
}
thanks in advance for any help Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code:
html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}
body {
background: #FEFFED;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 10px;
color: #000000;
cursor:default;
margin: 0; padding: 0;
overflow:hidden;
}
div.center {
/* Make element float in the center */
position: absolute;
left: 50%;
top: 50%;
/* Set the width and height */
width: 750px;
height: 410px;
/* Set margin to half the values of width/height */
margin-left: -375px;
margin-top: -205px;
}
div.rect {
background: #ADDFE7;
padding: 0px;
width: 750px;
height: 410px;
overflow:auto;
border: 1px solid #000000;
z-index: 1;
}
Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: 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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
<tr class="headerNavigation">
<td align="left" valign="top" width="33%" class="headerNavigation">
<a href="http://formone.net/shop/index.php?main_page=index">Home</a> |
<a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
</td>
<td align="center" width="25%"></td>
<td class="headerNavigation" align="right" valign="top" width="33%">
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
<tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
<td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td>
<td align="center" valign="top">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="main_page">
<tr>
<td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>
<!--// bof: categories //-->
<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
<tr class="leftboxheading" id="categories-heading-tr">
<!-- Sidebox Header -->
<td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
</tr>
<tr>
<!-- Sidebox Contents -->
<td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td>
</tr>
<tr>
<!-- Sidebox Footer -->
<td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
</td>
</tr>
</table>
<!--// eof: categories //-->
</td></tr></table></td>
<td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td>
</tr>
<tr>
<td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>
</tr>
<tr>
<td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
</tr>
<tr>
<td class="plainBox">Define your main Index page copy here.</td>
</tr>
<tr>
<td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
</tr>
</table><br />
</td>
<td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>
</td></tr></table></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="footertop">
<td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td class="footerbottom">Your IP Address is: 69.159.1.195</td>
</tr>
<tr>
<td class="footerbottom"></td>
</tr>
</table>
</td></tr>
<tr>
<td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
</tr>
</table></div>
</div>
</body></html>
They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): 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" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? I have the following: 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page </title>
<style type="text/css">
#content { width: 100%; float: left; margin-right: -1px }
.content_container { clear: both; }
.content_header_even, .content_header_odd { width: 100%; background-color: #69bfde; color: #595441; padding: 0.5em 0; text-indent: 1em; }
.content_header_odd { background-color: #b4e8fb; }
.content_graph_container { padding: 1em; }
.content_graph_container_even { background: #ff0000; }
.content_graph_container_odd { background: #00ff00; }
.content_info { width: 20em; float: left; }
</style>
</head>
<body>
<div id="content">
<div class="content_container">
<p class="content_header_even">Header</p>
<div class="content_graph_container content_graph_container_even">
<div class="content_info">
<p>This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Ideally, this will repeat and alternate colors but the text is not colored only a small section above the text. I thought that by enclosing it in the div, the background would be applied to the entire text. What am I doing incorrectly? I am a new user to the board and apparently cannot make posts containing URL's. Examples illustrating my issues described below are at ...lilinks.com /gp/css_prob/kickboxing.html I want to get the vertical scrolling images to consistently display from the top of the page and terminate at the top of the black footer. Similar image scrollers will appear on other pages that will be of varying depth (follow the 'Brazilian Jiu Jitsu' link for an example) Right now I have one 'container' that would be used for all the pages. I could create separate 'containers' for each scroller and set the height in pixels, but of course I cannot control browser settings, OS, etc. So my basic question is how can I contain the 'container' to 100% of the main content area without exceeding it. I want it to look like this: /gp/css_prob/kb.jpg The style sheet is he /gp/css_prob/css/test.css Thank you in advance for your assistance. Hello, I am asking this here because maybe you people have seen something like this before. I am trying to create a container that will contain other div boxes. These boxes could have differen width and heigths, and I would like thos container to handle there position. I do not know if this is even possible, another solution would be that you put the boxes in the container and determine how many you want to display in one line. However thanks for any sugestions, regards, sim085 I'm not sure where I'm making my mistake but I can't seem to get the boxes inside the container to stay at 100%. Here is the css code Code:
body {
margin: 0; /* zeroes the margins on the body */
padding: 0; /* zeroes the padding on the body ~ Opera carries a default
padding and requires this zeroing */
border: 0; /* zeroes off any existing border */
text-align: center; /* Hack to center the wrapper in IE5.x pc */
background-color:#BB7900;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
/* START OF LAYOUT FOR LITTLECREATIONSPHOTOGRAPHY.COM */
.wrapper { /* This is the block that contains all other blocks */
width:100%;
height:100%;
position:relative;
border:1px solid black;
}
.top_menu { /* This is the box that will contain the link at the top */
height:80px;
width:100%;
border-bottom:1px solid white;
}
.middle_container { /* This is the container box that keeps everything right width and center */
position:relative;
width:750px;
height:100%;
margin:0px auto;
z-index:0;
border:1px solid white;
z-index:1;
}
.left_content { /* This the the left hand on content box */
position:relative;
float:left;
height:100%; /*546px;*/
width:160px;
text-align:left;
padding: 2px 4px 2px 2px;
border-right:1px solid white;
z-index:2;
}
.right_content { /* The box that will contain right hand content, company title and picture */
position:relative;
height:100%;
margin-left:160px;
text-align:left;
padding:4px 2px 2px 10px;
border:1px solid black;
}
And here is the link that will show you want it looks like right now. http://littlecreationsphotography.com/css/ Thanks for any help that may come my way.. Stephen Firefox is giving: http://www.promogift.be/index.php?page=producten&catnr=7 So it shows the content out of his box, after a refresh everything is correct, how can i get it working from first loadtime? here's my site for reference. http://www.tobaccosmokeshop.com/temp.htm here's some code PHP Code: #breakfootercontainer{ clear:both; border:solid 1px red; background:url(images/navback.gif); background-repeat: repeat-y; padding:0px 0px 0px 189px; width:100%; } #footer{ border:solid 1px green; float:left; width:562px; text-align:center; } breakfootercontainer is a div that spans the whole width of my site, but pads over for my navigation bar. The problem is, In IE the container holds the footer, but in Mozilla (PC) and on my mac in safari and Mozilla the container is only like 0 px height and the footer div pops over the bottom border on the container. Here's my code I'm using. PHP Code: <div id='breakfootercontainer'> <div id='footer'> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> </div> </div> What is causing the container to not fill around the info inside the footer? Also, I have 2 columns(red border around field picture and welcome column and the nav with the blue border) with a container around them (big white border around both), one shorter than the other (the red border column), but I want the shorter one to go the full length of the container (white border) so my column backgrounds line up and part of the page isn't longer than the other. I want to use my footer as a cap all the way across the page. Is there any way to do this without putting <br>'s in the smaller container to fill it out? I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it. BUT I want the rest of the containers to be the same size as the biggest. I.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- See the first one is bigger? Well I want the rest to be of the same size, i.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- Hi all, I'm working on a website which has a horizontal navigation menu, much like the one on DaniWeb. Basically I need to include an icon which floats right for each list item. IE7 has a bug whereby if the container div does not have a width stipulated then a right floated element inside of the div will cause it to expand to 100% width. I've tried numerous workarounds that i've seen in blogs and other forums but to no avail. I've spent around 15 hours on this bug. I'm not a designer but due to lack of designer resource I'm having to take this on and finding it difficult to come up with a solution. Also the width of the container div is not known as the information is dynamic, so therefore I cannot simply set a fixed width. Here is an example of my code: Code: <div id="navSearchBar"> <!-- My repeater item --> <Item Template> <li> <a href="http://somelink.com">Click me<a> <img src="image_example.png" class="icon"> </li> </Item Template> </div> Code: #navSearchBar{
float:left;
width:auto !important; margin:0 0 10px;
background: #4594bf url(../LayoutImages/previewNav.png) repeat-x !important;
}
.icon
{
margin-top:4px;
margin-bottom:4px;
margin-right:4px;
margin-left:4px;
width:20px;
height:20px;
float:right;
}
|
|||||||