CSS - Hello Everybody And Extend Text Over A Div Without Resizing It

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

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.

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

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!

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.

I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area.

How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height.

The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content.

My css is below. The right_col class is the one that contains the content in question.

Code:

  /* CSS Document */
body {
  font-family:Geneva, Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 80%;
  background-color: #ffffff;
  margin: 0px 0px 0px 0px;
  background-image: url(../images/hw_back.gif);
}

#left_col {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: 100%;
  width: 18%;
  background-color: #63782B;
  background-image:url(../images/hw_back.gif);
}

#right_col {
  position: absolute;
  top: 0px;
  left: 18%;
  height: 100%;
  width: 82%;
  background-color:#FFFFFF;
}

#cart_rt {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 35%;
  text-align: right;
}

#cart_lt {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 35%;
  text-align: left;
}

#content {
  position: absolute;
  top: 20px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 100%;
}

I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance.

hxxp://adrian.briansykes.netau.net/

is it possible?

its the banner...

the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page

just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels...

cant a div be 100% of the page?

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.

I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this?

The example is at http://www.wattersisere.co.uk/devshed.

Thanks,

Watters

This is my site : http:// universitycenters.ucsd. e d u/new2/eat-cafes. p h p

In IE everything looks fine no matter what I do.
But in Mozilla the footer section at the botom always gets messed up and bent out of shape and the green (#CCC) colored background layer (div?) behind the content and sidebar never extends down far enough to wrap around the content and meet the footer. It's ok in both mozilla and IE when the content never gets largeer (height-wise) than 458px or so but I cant find where to edit this green bar.

I've tried so many things; I really need a wizards help. Any suggestions would be super appreciated. Thanks in advance. -S.

Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width.
Here's my CSS for the footer: Code:

#footer { 
	width:100%;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
	border: 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
} 

#footer_container { 
	width:950px;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0 px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
}

the site ishere

any ideas?
thanks

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Greetings,

I have the following in a style sheet:

Code:

.nameColumn {
width: 200px;
}

.groupColumn {
width: 100px;
}

.statusColumn {
width: 682px;
}

In the body of the page, I have table rows like this:

Code:

<tr>
<td class=nameColumn>foo</td>
<td class=groupColumn>bar</td>
<td class=statusColumn>foobar</td>
</tr>

Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window?

If I use width:auto, it makes the cell only as wide as the text it contains.

Thanks!!
DM