CSS - <div Id='container'> Not Containing Contents!?

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?

Hello,

I've been working on a site http://www.chequedelarealidad.org, and have recently experienced a problem with the 'links' page.

Initially, the page appears as normal, but if I tab between windows to another program and then return to this page, the contects on the right hand side become invisible.

I have validated the code using the W3C validator. Am not sure what the problem could be. Has anyone experienced anything similar to this? Or have a solution for me.

Thanks,

Victoria

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?

I have a div that has a table inside of it. Even though the table expands with content added, the div does not.

It's important to me that the div extend with the table because this div in question has a background shadow border for the table.

Here is the CSS:

Code:

#right {
  float: right;
  width: 80%;
  height: 100%;
}

#rt_brdr {
 height: 100%;
 width: 100%;
 padding-bottom:5px;
 padding-right: 10px;
 margin-bottom: 5px;
 vertical-align: bottom;
 background: url(img/r_brdr.gif) repeat-y right;
}

My HTML:

Code:

<div id="right">
   <div id="rt_brdr">
    <table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;"  cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
       </tr>
       <tr class="white_fill">
         <td></td>
         <td></td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
      </tr>
    </table>
  </div>
  </div>

I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot.

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

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?

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.

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 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'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

I have yet another CSS issue:

The site I'm working on has a dynamically generated table within a div named "data", if the number of rows is high (say over 1500 rows) the table is truncated. when I check the generated code all the data is present. Upon troubleshooting, I find that the issue is related to the overflow property I have set for this div. If the overflow is set to either visible or hidden all the rows are displayed. However if I use auto (preferred) or scroll the data table is truncated, while the page length appears as if the entire table is displayed.

Any ideas????

Code:

#data {
	width: 100%;
	overflow: auto;
	}

Code:

<div id="data">
		        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data">
                  <tr>
                    <th scope="col" width="5%" nowrap="nowrap">fund</th>
                    <th scope="col" width="6%" nowrap="nowrap">bsli</th>
                    <th scope="col" width="4%" nowrap="nowrap">reg</th>
                    <th scope="col">title</th>
                    <th scope="col" width="9%" nowrap="nowrap">projcode</th>
                    <th scope="col" width="7%" nowrap="nowrap">cip</th>
                    <th scope="col" width="4%" nowrap="nowrap">afc</th>
                    <th scope="col" width="10%" nowrap="nowrap">avail</th>
                    <th scope="col" width="10%" nowrap="nowrap">oblig</th>
                    <th width="10%" nowrap="nowrap" scope="col">unoblig</th>
                    <th scope="col" width="10%" nowrap="nowrap">outlays</th>
                  </tr>
<cfoutput query="qgetbsli" >
                  <tr>
                    <td scope="row" align="center" nowrap="nowrap">#fund#</td>
                    <td align="center" nowrap="nowrap">#bsli#</td>
                    <td align="center" nowrap="nowrap">#region#</td>
                    <td>#title#</td>
                    <td align="center" nowrap="nowrap">#projcode#</td>
                    <td align="center" nowrap="nowrap">#cip#</td>
                    <td align="center" nowrap="nowrap">na</td>
                    <td align="right" nowrap="nowrap">#numberformat(availability,'$,')#</td>
                    <td align="right" nowrap="nowrap">#numberformat(obligations,'$,')#</td>
                    <td align="right" nowrap="nowrap">#numberformat(unobligated,'$,')#</td>
                    <td align="right" nowrap="nowrap">#numberformat(outlays,'$,')#</td>
                  </tr>
</cfoutput>
                </table>
				</div>

I'm trying to change one of my sites from a good ol' table based layout to a CSS / XHTML one but I'm having a (first) problem with a the layout I started from a "template" I took from he

http://www.fu2k.org/alex/css/layout..._NN4_FMFM.mhtml

Here's what I'm talking about:

http://www.link7.ro/misc/cssd/test1.html

Basically I have a 3 (faux-)column layout with 3 floated divs. The first and second columns are put in a separate container float and the third column is floated next to this container. Everything was alright while developing in Firefox but then I checked in IE 6 and there it was: the surprise! The contents of the third column were not showing up. I think it's there though, because it's taking up space under the other elements... But it's somehow invisible. I tried fiddling with the contained div's width and I noticed that if I reduce it by ~5 pixels the content shows up in IE but it's misaligned to the right and I don't understand why because if I set the third column's background to be visible there's clearly a gap on the left even if I set all margins and paddings to 0.

Sorry about the mess in the code, I know half the comments are in English (kept from the original template) half are in Romanian. It's actually a draft, I haven't had time to clean it up yet.

Please suggest fixes or alternate templates I could start out from. I would like the column order in the source to be [main column], [side column 1], [side column 2]. The order of the side columns doesn't really matter but I would like my main column to come first.

Thanks!

Hello, I have a container div with an id of "outer". This container holds 3 column divs, leftcolumn, rightcolumn and centercolumn.

The container CSS looks like this: Code:

#outer{
    padding:0px;
	margin-left:auto;
	margin-right:auto;
	width:755px;
	background-color:#FFFFFF;
	height:100%;
    z-index:1;
	background-image: url(images/common/whitebox.gif);
    background-repeat:repeat-y;
}

But for some reason, the container doesn't extend down to the length of the inner divs. Each column will vary in the future because everything is pulled from a database. Yet you can see the issue he http://www.caillouette.com/FriendsPHP2/index.php

Any help, tips or tricks are appreciated.

Thanks

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?