CSS - Container Div Width Problem

i have created a profile at www.studavis.co.uk/audio - all done in css. The site renders fine in Internet Explorer (as expected) but when shown in Firefox there are problems. Firstly, I can't see why the border only goes along the top, despite specifying that it should go all the way round. I have a suspicion it has something to do with the floats on the two columns, though I am not certain on that. Also, the #conatainer id, despite having a background colour specified, it doesn't show through. Secondly, i need to fill the bottom of teh right column, so that it fills the same height as the larger left column.

I have been racking my brain on these for the past few hours so any help is GREATLY appreciated.

thanks
stuart

Hi

I am quite familiar with CSS but am stumped on how I could do the following.

Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container.

The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer.

This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height.

I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout.

Is there any way to recreate this but via CSS?

Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS

http://labwaves.com/temp/index3.php

This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have .

http://labwaves.com/temp/index2.php


Congratulations on making it to the end of this long, but hopefully un-confusing post

Thanks and any reply's are really, really appreciated as I am so stuck on this one!

I am working on a project based around the Thesis Wordpress theme where I have had to add a sidebar on the lefthand side of a site, which didn't seem like a real big deal. My approach to this task was to essentially create a new series of div layout tags to encompass Thesis' core "container" id through OpenHook... here's what I did:

With the 'Before HTML' hook, I added:

Code:

<div id="headerrunner">
<div id="footerrunner">
<div id="externalwrap">
   <div id="gutter"> 
           <div id="gutter-upper">
                <? include get_bloginfo('template_url').'/custom/gutter.php'; ?>
           </div>     
   </div>

And with After HTML I added:

Code:

<div class="clear"><!-- -->

<!-- end id="externalwrap" -->
</div>

<!-- end id="footerrunner" -->
</div>

<!-- end id="headerrunner" -->
</div>

Pertinent CSS is he



Code:

.custom #externalwrap {
	width: 97.7em;
	margin:0 auto;
}

.custom #container {
	margin: 0;
	float: left;
}

.custom #gutter {
	background: #ffcb19 url(images/gutter.png) repeat-y center bottom;
	float: left;
	padding: 0;
	margin-top: 63px;
	position: relative;
}

.custom #headerrunner {
	background: url(images/back.png) repeat-x;
}

.custom #footerrunner {
	background: url(images/footer.png) repeat-x 0 bottom;		
}

.custom #gutter-upper {
	background: url(images/gutter-top.png) no-repeat center top;
	padding-top: 45px;
}

So this works like a champ, with the sole exception that in Internet Explorer, the layout no longer remains centered, but rather is left justified. I'm kind of beating my head against a brick wall on this one now... anybody maybe have an idea?

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

http://www.veracon.net/qwaffle/

If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE.

I could use some help.

When i view rockitdesign.co.uk/portfolio in IE6, one of the columns seems too wide so the right one is getting squeezed underneath. This seems to happen on many of the sites i do so must be the same thing causing it? Any ideas? Thanks.

How do I make "content"
<div class="content">
to go all the way to the right side of the "profile"?
Code:

<style type="text/css">

#container { width: 800px;
  background-color:#666;
  padding: 20px;
}


#profiles_container {
 background-color:#33CC66;
}

#profiles_container .profile { background-color:#CCFFFF;
  margin: 20px 0px 20px 0px;
  padding: 10px;
}

#profiles_container .profile .foto {  background-color:#CCCC33;
 float: left;
 width: 200px;
 padding: 10px;
}


#profiles_container .profile .content {  background-color:#FF0000;
  float: left;
  margin-left: 10px;
  padding: 10px 10px 10px 10px;
}

#profiles_container .profile .content .col1 { background-color:#CCFFCC;
 float: left;

}

#profiles_container .profile .content .col2 {
 float: left;

}


#profiles_container .profile .btm{
 background-color:#999999;
}

.clear {clear:both;}

</style>



</head><body>

<div id="container">

            
<div id="profiles_container">	



	<div class="profile">
    	<div class="foto"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Photo_1" border="0" align="top" />
        </div><!-- END foto -->
        
    	<div class="content">
    		<div class="col1"><p>COLUMN_1</p></div><!-- END col1 -->
    		<div class="col2"><p>COLUMN_2</p></div><!-- END col2 -->
    
		</div><!-- END content -->        
        
        <div class="clear"></div>
		<div class="btm"><p>BOTTOM</p></div>        
        
	</div><!-- END profile -->

		
</div><!-- END profiles_container -->


</div><!-- END container -->

hi,

wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code:


Code:

#header {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 1px solid #666;
	background: #ccc;
	height: 100px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 70px;
	}

html>body #header {
	height: 70px; /* ie5win fudge ends */
	}

#menu_v {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 1px solid #666;
	background: #ccc;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 120px;
	}

html>body #menu_v {
	width: 120px; /* ie5win fudge ends */
	}

#content {
	position: absolute;
	top: 120px;
	right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
	margin: 20px 20px 20px 190px;
	padding: 10px;
	border: 1px solid #666;
	background: #ccc;
             }
	

I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated.

Here's my HTML code: Code:

<div id="bannerdiv"></div>  

<div id="contentdiv"> 
Content here</div>  

<div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div>  	<div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p>  	  <form action="http://search.atomz.com/search/" method="get" target="main">          <b>Search the Site<br />          </b>          <input name="sp-q" size="15" />          <input name="submit" type="submit" value="Go" />          <input name="sp-a" type="hidden" value="sp10023119" />          <input name="sp-f" type="hidden" value="ISO-8859-1" />        </form>  	  
</div>    </div>  </div>  

<div id="topnavdiv">    <ul>      <li><a href="/" id="buttonhome"><b>Home</b></a></li>      <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li>      <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li>      <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li>      <li><a href="news.html" id="buttonnews"><b>News</b></a></li>      <li><a href="people.html" id="buttonpeople"><b>People</b></a></li>      <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>    </ul>  

</div>

Here is the relevant CSS code:

Code:

#bannerdiv {  	background-image: url(images/logo_banner.gif);  	height: 120px;  	width: 100%;  	background-color: #3366CC;  	background-repeat: no-repeat;  	background-position: left top;  	display: block;  	top: 0px;  	position: absolute;  	z-index: 9;  	left: 0px;  }  body {  	font-family: Arial, Helvetica, sans-serif;  	font-size: 12px;  	color: #000000;  	margin: 0px;  	padding: 0px;  }  
#leftnavdiv {  	position:absolute;  	left:0px;  	top:146px;  	width:237px;  	z-index:2;  	font-size: 11px;  }  #contentdiv {  	position:absolute;   	left:250px;   	top:146px;   	z-index:1  }  
#leftnavinnerdiv {  	width: 210px;  	margin-top: 0px;  	margin-bottom: 0px;  	margin-left: 10px;  	padding-bottom: 30px;  	padding-top: 0px;  }
#leftnavouterdiv {
	background-color: #EEF3F9;
	background-image: url(images/bg.newsbottom.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#searchdiv {
	background-color: #EEF3F9;
	width: 234px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#innersearchdiv {
	margin: 0px 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#topnavdiv {
	position:absolute;
	left:0px;
	top:120px;
	width:100%;
	z-index:3;
	background-color: #3366CC;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-color: #f8c015;
	border-bottom-color: #f8c015;
	border-right-color: #f8c015;
	border-left-color: #f8c015;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	height: 24px;
}

http://www.turboconceptsllc.com/main.php

in IE 6. how do i get the top banner stretch to span across the entire width of the browser? i think its stopping at the scroll bar, from what ive read..

how is this fixed?

Code:

.main_table_top_banner
{
    background-image:url('');
    background-repeat: no-repeat;
    background-color: #3A3A3E;
    width: 100%;
    height: 50px;
    position:absolute;
    left:0px;
    top:0px;
    overflow: none;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    border:0px solid;
    z-index:1;
}

me again,

i fixed my last problem just to run into another
i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable.
the complete site is here

i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it.

it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it

EDIT
solved problem....

okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before

EDIT2
i added the line
Code:

width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); 

to my fixed4ie.css file ....

this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers.
this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width ....

if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem

Hi all - ive discovered a css problem when using 100% width areas on a website. take the following site for example..

offmymakeupbox.com

if you open a browser that is not maximized there is a scrollbar that allows you to scroll to the right, but if you scroll to the right you can see that the footer has been cut off.

ie. it is the width of the resized browser and not 100% width of the actual template.

is there a way to fix this?
thanks

http://www.ourdayton.com/index.html?do=regUser

reffering to the dark blue box with the form contained in it:

With the width set to default, or width:auto, it stretches to fit the parent.

If I specify a width, the box will not stretch to hold the content within it. I've also played with min-width/max-width to no avail.

I'm sure im just missing/forgetting a property.

Here is the code for the box:
Code:

#generalBox{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 8px 8px 8px;
    border: 1px solid #525c69;
    background-color: #212a34;
    text-align: center;
}

As simple as the problem sounds, Im completely puzzled by what could be going wrong.

The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE.

Here is the code:

Code:

  #left {
    width:100%;
    height:598px;
    padding:0;
    background: #EEF;
    display: table-cell;
    background: url("bg.gif") top left repeat-x;
    }

Anyone have any ideas?

I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS.

Code:

#container {
	width:100%;
	background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
	margin:0px;
	padding:0px;
	text-align:left;
	}


#header {
	height:145px;
	width:100%;
	background-image: url(images/topbackground2.jpg);
	text-align:center;
	margin:0px;
	padding:0px;}
#navbar{
	float:left;
	width:122px;
	margin:0px;
	padding:0px;}
	
#content {
	
	background:#fffce0;/* background colour of right column */
	margin-left:122px;/*this is the space for the left column */
	padding:0px;
	
}

#footer {
	clear: both;
	border-top:1px solid red;
	border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          background-color: #ccffcc;
          width: 100%; 
	text-align: right;
	margin:0px;
	padding:0px;
}

I can't figure this one out!
Code:

<div id=container>
   <div id=header>
   </div>
   <div id=navbar>
   </div>
   <div id=content>
   </div>
   <div id=footer>
   </div>
</div>

the content div is dynamic so it could be very wide.