CSS - Main Div Wont Extend With Content

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

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.

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!

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

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

Hi -- I am trying to set up a really basic css layout, and it just isn't working out for me. All I want is for the page to be split down the middle, and a footer than spans the full width of the page.

Here's what I have:

CSS:

Code:

body {
				color: #FFFFFF;
				background-color: #000;
	}
		
#leftcontent{
				float:left;
				width:50%;
				border:0px;
				padding:0px;
				color:#FFFFFF;
				background-color:#000;
		}

#rightcontent{
				margin-left:50%;
				margin-right:0px;
				width:100%;
				border:0px;
				padding:0px;
				color: #000;
				background-color:#FFFFFF;
		}

#bottomcontent{
				float: bottom;
				margin-bottom:0px;
				width:100%;
				border:none;
				padding: 10px;
				position:fixed;
				bottom:0;
				background-color:#FBBF0D;
		}

HTML:

Code:

<html>
	<head>
		<title>Crap!</title>
		<link rel='stylesheet' href='css.css' type='text/css' />
	</head>
	
	<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0">
	
		<div id="leftcontent">

			<h1>A logo will go here</h1>
			
		</div>

		<div id="rightcontent">

			<h1>A navigational bar will go here</h1>
			<br clear ="all" />

		</div>

		<div id="bottomcontent">
		
			<center>
				<h1>Another logo will go here</h1>
			</center>

		</div>

It works in IE 5.2 for Mac, but not in Safari, so I know something is very wrong, but I can't figure out what. Please help!

Hello everybody, I present myself, I'm Alessandro a new member from Italy.
I found this forum very useful.
Hope to find good answers following topics and hope to help someone when I'm able to.
Ciaooooo

I have this issue for the moment:

I have a homepage layout with 3 columns with an images and captions inside everyone.
I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

Code:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it.

here is the link:
http://mizuedesign.com/0000.html

in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.)

However in FF, Safari, and Opera the same DIV does not extend.

I am trying to achive the results I see in IE7.

Any help would be greatly appriciated.

S. Boztepe

Hi,

I like to know how to extend an existing class.

.footertext50per
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
}

.footertext50perleft
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
TEXT-ALIGN: left
}

As you see in the second class "footertext50perleft", the only difference with respect to the first class "footertext50per" is the 'text-align'. This lead to duplication of coded.

I like to know whether it is possible to extend "footertext50per" to "footertext50perleft" and just define the additions or modifications only.

Thanks.

I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns.

I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns.

You can see a non-css example at: http://www.sananselmopreschool.org/pilot/

Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so.
body {
height:100%;
padding:0;
margin:0;
background-color:#ECF6DD;
font-family: Tahoma;
font-size: 11px;
color: #707070;
text-align:center;
border: 1px solid purple;
}

.body_container {
position: relative;
height:100%;
width:100%;
left: 0px;
border: 1px groove darkred;
}
.body_position_center {
height:100%;
position:relative;
width:780px;
margin-right: auto;
margin-left: auto;
border-collapse:collapse;
border: 1px solid #999 ;
}

.header {
padding:0;
margin:0;
position:relative;
width:766px;
height:195px;
}

.leftblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}

.centerblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.rightblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.blockcontents
{
padding-top:14px;
padding-bottom:14px;
border-bottom : 3px dotted #228B22;
text-align:left;
}

Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution.

Hi guys,

I'm having a real problem with CSS on this page.

The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this?

I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one.

Here's the main bits of css...

Code:

#maincontent
{
  position:relative;
  width:762px;
  margin-top:0px;
  background-image:url(contentbkg.jpg);
  background-repeat:no-repeat;
  padding-top:10px;
  text-align:left;
}

#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}

#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}

#translucentblack {
   width: 150px; 
   float:right;
   background-color: #000000; 
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   opacity: 0.4;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:5px;
}

#opaqueblack {
   width: 150px;     
   background-color: transparent;   
   float:right; 
   position:absolute;
   margin-left:592px;
   #margin-left:22px;         
   z-index: 2;    
   font-family:Verdana, Arial, Helvetica, sans-serif;   
   padding:5px;       
}

#translucentbkg {
	color:#FFFFFF;
	font-size:12px;
   width: 566px; 
   background-color:#FFFFFF ;
   filter:alpha(opacity=80);
   -moz-opacity:0.8;
   opacity: 0.8;
	padding:5px;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#opaquetext 
{
color:#006600;
font-size:12px;
   width: 566px;     
   background-color: transparent;    
   position:absolute;       
   z-index: 2;    
   padding:5px;         
   text-align:left;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew

The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

mirroring content and positioning one div over another to get semi transparent backgrounds.

Hope that all made sense... any help would be incredible!!!

thanks!

Hi All,


Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal!

Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic.

Now I have designed an overlay for my site:

http://www.wellandpower.net/website2/index.php

The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div.

The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF.

Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange.

CSS Code:
Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }

  

 #overlay {


      visibility: hidden;


      position: absolute;


      left: 0px;


      top: 0px;


      width:100%;


      height:100%;


      text-align: center;


      z-index: 1000;


      background-image:url(/images/checkerboard.png);


 }


 #overlay #overlayholder {


     margin-top: 50px;


     padding: 10px;


     width: 850px;


     text-align: center;


     background-color: #FFFFFF;      


 } 

Any help greatly appreciated.

Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database.

Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php

thanks
-Sean