|
CSS - How To Get Div Background To Extend To Full Size Of Div
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%;
}
Similar TutorialsI'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 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 Hello I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good. Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way). I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail. Is there a way to make this work in IE? Is there maybe another way to make this without absolutely-positioning the fourth DIV? Cheers, Calius Sample code follows: Code: <html> <body> This is a test<br /> <div style="width:400px; position:relative; border:1px solid red;"> <div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div> <div style="border:1px solid blue; margin-bottom:16px;">1</div> <div style="border:1px solid blue; margin-bottom:16px;">2</div> <div style="border:1px solid blue;">3</div> </div> This is a test<br /> </body> </html> Hello. How do you stretch a background-image so its height and width are equal to its parent? My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera. My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! 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">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
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! 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"> </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 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 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 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 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? 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! 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. 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 {
Any help greatly appreciated. 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 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 I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width. Is there a way to have the text either wrap or extend without extending the div it's in. I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width? CSS Code:
/* columns */
#lcol {
float: left;
width: 190px;
vertical-align: top;
}
#mcol {
float: right;
width: 350px;
padding-right: 10px;
vertical-align: top;
}
#rcol {
float: right;
width: 200px;
vertical-align: top;
}
/* gray box */
.gray_box_frame
{
background-color: #fff;
border: solid 1px #404040;
width: 100%;
padding: 0px;
margin: 3px 0px 3px 0px;
}
.gray_box_head
{
height: 18px;
background-color: #404040;
}
.gray_smm,
.green_smm
{
display: inline;
float: right;
height: 18px;
cursor: pointer;
}
.gray_box_content,
.green_box_content
{
margin: 0px;
padding: 5px;
}
|
|||||||