CSS - In Ie6 My Main Content Div Is Broken Out Of The Layout

So far my site appears somewhat like this

Header

Menu


Main Content


Footer


Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes:

Box 1 Box 2
Box 3 Box 4


So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer.

If attempted to wrap them in container's but have failed miserably, any help would be appreciated.

Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem.

If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons:

http://bit.ly/gL9sA8

The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway.

In other words, how would you code the DIV tag so that the following two things happen:

1. It's always in view on the LEFT side of the webpage
2. The main DIV stops against it, and doesn't overlap it if resized

As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that.

Here is the current code for that left sided DIV column:

Code:

<div style="position:fixed; margin-left: -180px; top: 75px;">
// My html content for mini You Tube video & button is here
</div>

The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window.

My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now.

If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction!

Hi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link

http://http://www.jamkastin.com/New..._Dreams/dd.html

Here is my CSS that I did for the middle and bottom image.

Code:

<style type="text/css">

#html, body {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width:800px;
  height: 100%;
  background: url(images/bg.png);
  margin: 0 auto;
  text-align: center;
	font-family:  Verdana, Helvetica, sans-serif;
  } 

#container { 
	width: 780px;
	background:  url(images/wood_back.jpg);
	margin: 0 auto; 
	overflow: hidden;
} 

#navigation {
		margin-top: -4px;
		width:780px;
		background: #B6C5A4;
		font-family:Trebuchet MS, Helvetica, sans-serif;
		text-align:center;
		overflow:hidden;
	}

#navigation ul {
	
		float:left;
		list-style:none;
		margin: 0;
		padding:0;
		position:relative;
		left:50%;
		text-align:center;
	}
	#navigation ul li {
		display:block;
		float:left;
		list-style:none;
		margin:0;
		padding:0px;
		position:relative;
		right:50%;
	}
	
	#navigation ul li a {
		display:block;
		margin:0;
		padding:.4em .8em;
		color:#000;
		text-decoration:none;
		
	}
	#navigation ul li a span {
		display:block;
	}
	#navigation ul li.active a {
	color: #fff;
		font-weight:bold;
	}
	#navigation ul li a:hover {
	color: #fff;
	}

#mainContent { 
float: left; 
width: 450px;
margin: 15px 15px -71px 15px;
	padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}

#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}

#sidebar1 {
	float: right;
	width: 200px; 
	padding: 15px;
	margin: 15px;
background:url(sidebg.gif) repeat-y;
}

p {
padding: 0px 20px 0px 20px;	
}

#mainContent .article
    {
    padding-top:20px;  
    }
	
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}

.copy {
	font-size: 12px;
	color: #000;
}

.copy a {
	color: #000;
}

this should be simple, but i just don't seem to have the hang of css yet

what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css

the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it

maybe just looking at what i have will help more

the HTML

Code:

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

and the css

Code:

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

those funky colors are so i can see the divs

Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question:

http://www.americanidiotsband.com/

If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it...

Here is a link to the stylesheet that I made up:

http://www.americanidiotsband.com/styles.css

I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!...

Here's the url

Template

Any comments on the code will be very helpfull. Even if it is out of topic.

In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background.

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Hi,

I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page).

The site is:
http://67.18.220.222/~duoboots/2005/z.html

Stylesheet:
http://67.18.220.222/~duoboots/2005...s/style2005.css

As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution)

Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen.

However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops.

Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS.

Here's some CSS:

Code:

body, p {

	color:#666666 ; 
	font-family: Verdana, Arial ; 
	font-size:7.5pt ; 
	font-weight:normal; 
}
body {
	height:100%;
	margin: 0px;
	background-color: #2F201E;
}

#container {  
 	width: 968px;
	height:100%;
}


#nav {
	width: 201px;
	border-right: 3px solid #FFFFFF;
	background: #8D603B;
	float: left;
	min-height:100%;
}

I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated!

Thanks a lot!

I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes.

How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns?

This is the CSS:

Code:

/*container div*/
#container {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0; margin-top: 0;
	padding: 0px;
	text-align: left;
	font-size: 11px;
}

#contentleft {
        width: 180px;
        background: #fff;
        float: left;
        margin: 0;
        border-left: 1px solid #000; border-right: 1px solid #000;
}

#contentcenter {
	width: 454px;
	padding: 0px;
	float: left;
	margin: 0;

}

#contentright {
	width: 136px;
	padding: 0px;
	float: right;
	margin: 0;
	border-left: 1px solid #000; border-right: 1px solid #000;
}

CSS newb here and this is my first full CSS page layout ever, so go easy.

Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page:

http://www.crackin.com/cbled/index.html

and here's the code:

Code:

body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}

.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}

#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}

#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}

#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}

#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}

#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}

#clear {clear:both;} 

-->
</style></head>

<body class="oneColFixCtr">

<div id="nonFooter">
  <div id="content">    
    
	<div id="mainlayout">
   	  <div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
	  <div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
	  <div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
	  <div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
	  <div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
	  <div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
	  <div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
      <div id="navbar">
        <div id="navbar-home"><a href="#">home&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-info"><a href="#">company info&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-link3"><a href="#">link3&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbar-link4"><a href="#">link4&nbsp;&nbsp;&nbsp;</a></div>
        <div id="navbarbreak"></div>
      </div>
      <div id="pagecontent" align="justify">
      
      <p>Lorem ipsum, etc etc...</p>
      
      </div>
    </div>
 
  </div>  
</div>

<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
  <div id="page-edges-b">
    <div id="mainbg-leftvert"></div>
    <div id="mainbg-rightvert"></div>
  </div>
</div>

<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
	  <div id="greenbreak"></div>
</div>

<!--FOOTER-->
<div id="footer">
  <div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
  <div id="footer-bg"></div>
  <div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
      
</body>
</html>

Any help is much appreciated.

hello all,

i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box.

I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable.
I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction !

An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure.
As you can see, the only scrollable area is the center orange zone : "viewport".

thank you for your time and help !
Alexandre

Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections.

I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though.

I can't explain much better than that, so without further ado:

CSS:
Code:

.columns-float{
    float : left;
    width : 80%;
}
.column-one
    {
    width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
          inquiring about. The above problem assumes this attribute
          is set to "auto". */
    float : right;
    }
.column-two
    {
    width : 25%;
    float : left;
    }
.column-three{
	width : 20%;
	float : right;
}
.box-footer{
	clear : both;
}
.column-one-content{
	margin-left: 1px;
	margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
     p\osition: relative;
}

(Above was borrowed from here, albeit with modifications.)

HTML: Code:

...

<div class="columns-float">

<div class="column-one">
<div class="column-one-content">
<h2>column 1</h2>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="column-two">
<div class="column-two-content">
<h2>column 2</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

</div><!-- close boxbody -->
<div class="column-three">
<div class="column-three-content">
<h2>column 3</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

<div class="box-footer">Footer
</div>

Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me.

Any help would be appreciated, and I thank you very much for your time. This is driving me batty.

Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???

Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php
Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php

The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css.

Would anyone be willing to take a look? Thanks in advance.