CSS - Contents Container Div Resize Issue

Good Day,

I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added.

This is what the page looks like with limited text:

http://lisawesselsphotography.ca/services.html

It looks ok from here

This is what it looks like when a greater amount of text is inserted:

http://lisawesselsphotography.ca/services-test.html

Not so cool looking

Here is my css:

Code:

html, body {
		height: 100%;
}

body {
		margin: 0px;
		padding: 0px;
		background: #11121A url(images/bg1_01.jpg) repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #5A5D6A;
}

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
}

p, ol, ul {
		margin-top: 0px;
}

ol, ul {
		margin: 0px;
		padding: 0px;
}

p {
		line-height: 220%;
}

strong {
		font-weight: normal;
		color: #FFFFFF;
}

a {
		color: #A40000;
		outline: none;
}

a:hover {
		text-decoration: none;
}

a img {
		border: none;
}

img.border {
}

img.alignleft {
		float: left;
		padding-right: 25px;
}

img.alignright {
		float: right;
}

img.aligncenter {
		margin: 0px auto;
}

hr {
		display: none;
}

ul.style1 {
		margin: 0px;
		padding: 0px 0px 0px 15px;
}

ul.style1 li {
		padding: 3px 0px;
}

ul.style1 span {
		color: #FFFFFF;
}

/** WRAPPER */

#wrapper-content {
		background: url(images/bg1_02.jpg) repeat-x left top;
}

#wrapper {
		background: url(images/bg1_05.jpg) repeat-y center top;
}

#wrapper-bgtop {
		background: url(images/bg1_03.jpg) no-repeat center top;
}

#wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg1_04.jpg) repeat-y center bottom;
}

.homepage #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.homepage #wrapper-bgtop {
		background: url(images/bg3_01.jpg) no-repeat center top;
}

.homepage #wrapper-bgbtm {
		background: url(images/bg3_02.jpg) no-repeat center bottom;
}

.single #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.single #wrapper-bgtop {
		background: url(images/bg2_01.jpg) no-repeat center top;
}

.single #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg2_02.jpg) no-repeat center bottom;
}

.gallery #wrapper {
		background: url(images/bg4_03.jpg) repeat-y center top;
}

.gallery #wrapper-bgtop {
		background: url(images/bg4_01.jpg) no-repeat center top;
}

.gallery #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		padding-bottom: 60px;
		background: url(images/bg4_02.jpg) no-repeat center bottom;
}

.container {
		width: 900px;
		margin: 0px auto;
}

.clearfix {
		clear: both;
}

/** HEADER */

#header {
}

/** LOGO */

#logo {
		width: 300px;
		height: 174px;
}

.homepage #logo {
		width: 300px;
		height: 350px;
}

#logo h1, #logo p {
		margin: 0px;
		line-height: normal;
		text-indent: -9999em;
}

#logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 174px;
		background: url(images/homepage02.png) no-repeat left top;
}

.homepage #logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 350px;
		background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}		
		
}

/** MENU */

#menu {
		height: 45px;
		padding: 15px 0px 0px 40px;
}

#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: normal;
}

#menu li {
		float: left;
		padding: 0px 30px;
}

#menu a {
		float: left;
		display: block;
		height: 23px;
		margin: 0px;
		padding: 6px 0px 0px 0px;
		line-height: 1;
		letter-spacing: -1px;
		text-decoration: none;
		text-transform: uppercase;
		text-shadow: #270000 -1px 2px 3px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
}

#menu a:hover {
		text-decoration: underline;
}

#menu .active {
		background: url(images/subpage1_02.jpg) repeat-x left top;
}

/** PAGE */

#page {
}

/** CONTENT */

#content {
}

.homepage #content {
		height: 290px;
		background: url(images/homepage022.jpg) no-repeat center top;
}

.gallery #content {
		padding: 0px 45px;
}

.single #content {
		padding: 100px;
}

/** SIDEBAR */

#sidebar {
}

/** FOOTER */

#footer-wrapper {
		height: 200px;
		background: url(images/bg1_06.jpg) no-repeat center top;
}

#footer {
		padding-top: 40px;
}

#footer p {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		line-height: 220%;
		color: #31343F;
}

#footer .column1 {
		float: left;
		width: 575px;
}

#footer .column2 {
		float: left;
		width: 50px;
		height: 82px;
		background: url(images/subpage1_03.jpg) no-repeat center top;
}

#footer .column3 {
		float: right;
		width: 275px;
		text-align: right;
}

#footer .copyright {
		padding-top: 5px;
		font-size: 10px;
		color: #252732;
}

#footer .copyright a {
		color: #252732;
}

.box-style {
}

.box-style .title {
		margin: 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 28px;
		font-weight: bold;
		color: #FFFFFF;
}

.box-style .byline {
		margin: -10px 0px 30px 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		color: #363945;
}

/*  GALLERY   */

#slideshow {
}

#gallery {
		position: relative;
		width: 804px;
		height: 337px;
		margin: 38px 0px 50px 0px;
}

#gallery .slide {
		width: 634px;
		height: 337px;
		position: absolute;
		left: 85px;
		top: 0px;
		background: url(images/gallery_01.jpg) no-repeat left top;
}

#gallery .output {
		position: absolute;
		top: 17px;
		left: 17px;
}

#gallery .border {
		width: 600px;
		height: 300px;
		position: absolute;
		top: 17px;
		left: 17px;
		background: url(images/gallery_borders.png) no-repeat left top;
}

#gallery .captions {
		width: 600px;
		height: 55px;
		position: absolute;
		left: 17px;
		top: 262px;
		background: url(images/gallery_caption.png) repeat left top;
		font: 12px Arial, Helvetica, sans-serif;
		text-transform: uppercase;
}

#gallery .captions p {
		margin: 0px;
		padding: 22px 0px 0px 0px;
		line-height: 1;
		text-shadow: #000000 0px 2px 0px;
}

#gallery .captions .left {
		float: left;
		padding-left: 20px;
		color: #FFFFFF;
}

#gallery .captions .right {
		float: right;
		padding-right: 20px;
		color: #777777;
}

#gallery .prev, #gallery .next {
		display: block;
		width: 68px;
		height: 106px;
		position: absolute;
		top: 116px;
		text-indent: -9999em;
}

#gallery .prev {
		left: 0px;
		background: url(images/gallery_02.jpg) no-repeat left top;
}

#gallery .next {
		right: 0px;
		background: url(images/gallery_03.jpg) no-repeat left top;
}

#gallery-thumbnails {
		width: 750px;
		margin-left: 30px;
}

#gallery-thumbnails ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
}

#gallery-thumbnails li {
		float: left;
		display: block;
		width: 120px;
		height: 60px;
		padding: 15px;
		position: relative;
}

#gallery-thumbnails img {
}

#gallery-thumbnails .border {
		display: block;
		width: 130px;
		height: 70px;
		position: absolute;
		left: 10px;
		top: 10px;
		background: url(images/gallery_borders.png) no-repeat left bottom;
}

#gallery-thumbnails .active .border {
		background-position: -130px 100%;
}

Look at this page - http://certified.tmhdesign.com/about.asp

I have a div called container, then in that div one called header, content_right, content_left, and footer.

What is frustrating me is that I have to hard code a min-height for the left and right colums and if you scroll down you'll see where the background color of the body appears below the right column which I want to be white. When I specify the color of the container that does not fix the issue. Any help would be appreciated. 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;
}

I have just moved to working with layers as opposed tables/cells.
Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much

Ed

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