CSS - Align A Container Div

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

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

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?

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

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;
}

Hey guys,
I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem.

When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears.

Any help would be appreciated.

The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php

The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php

Thanks a lot guys.

Dan

Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css:

Code:

<html>
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="container"><!--BEGIN CONTAINER-->
		<div id="logo"></div>
		<div id="motto">
			<div id="telno"></div>
			<div id="quote"></div>
		</div>
		<div id="navigation">
		</div>
		<div id="search"><!--BEGIN SEARCH-->
		</div>
		<div id="banner_1"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="empty"></div>
		<div class="box2"></div>
		<div id="contenthome"></div>
		<div id="sectiontwo"></div>    
		<div id="sectionthree"></div><!--END SECTION THREE-->
		<div id="footer"></div><!--END FOOTER-->  
</div><!--END CONTAINER-->
</body>
</html>

CSS

Code:

*{
    padding:0; margin:0;
}
 
body {
    height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
    color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}

div {
	border: 1px solid #000;
}

a {
  font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  color: #66308f; text-decoration:none;
  }

#container {
    height: 100%; width: 927px; margin: auto;
	padding-left: 10px; padding-right: 10px; background-color: #ffffff;
	min-height: 100%; /* for mozilla */
}

#logo {
  background-image:url(../images/logo.jpg); background-repeat:no-repeat;
    height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}

#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}

#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}

#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}

/* top menu navigation */
#navigation {
    height: 35px; width: 670px; float: left; margin-top: 0px;
}

/* search box */
#search {
    height: 35px;width: 253px; float: left;
    margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}

.button {margin:0px 0 -3px 5px;}

.inputbox {
	width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
	}

/* search box end */

.box{
  height:52px; width:205px; float: right;
  margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
  }
  
.empty { 
height: 94px; width: 205px; float:right;
}

.box2{
  height:141px; width:205px; float: right;
  margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
  }

#contenthome {
  height: 50px; width: 927px; float: left;
  margin-top: 5px; margin-left: 0px;
}

#sectiontwo {
    height: 50px; width: 927px; float: left;
    margin-top: 0px; margin-bottom: 10px;
}

#sectionthree {
    height: 50px; width: 927px; float:left;
    margin-top: 0px; margin-bottom: 15px;
}

#footer {  
    background-color:#b3d800; height: 56px; width: 927px;
    float: left; margin-top:0px;
}

#banner_1 {
    height: 413px; width: 701px; float: left; margin-top: 0px;
    margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}

but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers.

Thanks in advance.

Please see:

http://www.larreamma.com/staff2.html

Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph?

<p style="margin-bottom:150px">&nbsp;</p>

Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements.


C'mon Kravvitz...

Hey All,

I am wondering if it is possible to make a <div> container that grows depending on the size of the other <div> inside of it. Basically the scenario that I am going for...

- I have a container <div> that centers all other <div>s on the page.
- The container <div> has a double border on it that I would like to appear all of the time.
- Depending on the content from page to page that sizes the <div>s inside the container <div> I want the container <div> to change (in height) so that the border stays and so that I can just keep the CSS definitions the same and not worry about changing them on every page.

Is this possible?

A cheesy way to do this is to just put a whole bunch of line breaks in the container <div> until the page is the height that I want it to be. That's fine, but it makes the code look sloppy and there HAS to be a better way to do this.

~darknailblue

Hi All,

I am trying to get the container div to contain the contents of the page, so that if someone has a lower res browser / reduces the size of the page, the whole thing colapses inwards.

I simplly cannot get it to work!

In IE it does not shrink, in FF the container shrinks, but the elements inside it dont.

Charlie