|
CSS - Automatically Stretch Css Layout Vertically Down?
Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would):
Code:
<HTML>
<HEAD>
<STYLE>
.frame {
margin-left : 5%;
width : 90%;
font-size : 1em;
text-align : center;
}
.header {
width : 800;
border : 0.05em dashed black;
text-align : center;
}
.header1, .header2, .header3 {
float : left;
margin : 1px;
vertical-align : center;
font-size : 0.8em;
position : relative;
border : 0.05em red solid;
}
.header1 {
text-align : right;
width : 750;
}
.header2 {
text-align : center;
width : 40;
}
.clear {
clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Similar TutorialsI'm setting up a template for a page where there's essentially three rows. Header, content, and footer. I set the entire table to be 100% vertical and I've also set the table in row 2 (the content row) to be 100% vertical. But when I view the page in IE, the content row only stretches as much as there is content, but I'd like it to stretch and hit the bottom edge of the page even if there is not enough content. Any ideas? I would like the content table on the website to stretch as to the edges of whatever space it is taking up. But when I view the page, the table doesn't stretch vertically down until it hits the bottom edge. Any ideas? PHP Code: .content { height: 100%; width: 100%; } Is it somehow possible to stretch a containing (relatively positioned) div vertically around its child p's, which are absolutely positioned, without setting the height of the parent? I have tried the following code, which - obviously - does not work: 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" xml:lang="en" lang="en"> <head> <title></title> </head> <body> <div style="position: relative; width: 764px; border: solid 1px #C63949; background-color: grey;"> <p style="position: absolute; left: 255px; top: 29px; width: 164px; height: 113px; background-color: orange;"> </p> <p style="position: absolute; left: 25px; top: 27px; width: 198px; height: 175px; background-color: blue;"> <a title="x.jpg" href="x.jpg"> <img alt="x.jpg" src="x.jpg"/> </a> <br/> <strong>description</strong> </p> <p style="position: absolute; left: 255px; top: 151px; width: 168px; height: 164px; background-color: red;"> another div </p> <p style="position: absolute; left: 436px; top: 34px; width: 238px; height: 138px; background-color: green;"> <a title="y.jpg" href="y.jpg"><img alt="y.jpg" src="y.jpg"/> </a> </p> <p style="position: absolute; left: 29px; top: 220px; width: 182px; height: 153px; background-color: yellow;"> <a title="z.jpg" href="z.jpg"> <img alt="z.jpg" src="z.jpg"/> </a> <br/> <strong>description</strong> </p> testing testing testing </div> </body> </html> The problem is, I am using a online editor which creates the code for the child. I cannot change that css code. I am able to add to it, or change the css for the parent. If you have a suggestion how I can stretch the containing div, so it goes just below the lowest p, I would be very happy! EDIT: I just read on http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout "There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element" If this is true, than is there another way I can solve this problem? All I wanna do is to stretch my container div vertically depending on the maincontent div part of my css PHP Code: body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; <<<<-----bottom-border must stretch, sort to speak } #mainContent { /*div on the right of my nav-div*/ width: 560px; height: 100%; right: 0px; top: 40px; position: absolute;/* voor ie*/ text-align: left; background-color: #FF0000; } But my border(container div does't stretch) Complete PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; } #mainContent { width: 560px; height: 100%; right: 0px; top: 40px; position: absolute; text-align: left; background-color: #FF0000; } --> </style> </head> <body> <div id="container"> <div id="mainContent"></div> </div> </body> </html> Any tips, solutions I have a layout that has the normal four divs: Header Navigation Content Footer All of the divs are 775 px wide and are centered. The nav is a list of 6 links, and right now they take up very little space relative to the 775px they sit above. I would like them auto fit so that they take up all of the all of the 775px. If it is possible, I would like them to do correct depending on what is typed it, so that I'm giving each a specific px width. I've attached the HTML and the CSS that accompanies it. I'd post a link to a snapshot of it, but I can't post links yet. :x Any help would be greatly appreciated! HTML: Code: <div id="nav"> <ul> <li style="margin-left: 1px"><a href="/link1.html"><span>link1</span></a></li> <li><a href="/link2.html"><span>link2</span></a></li> <li id="current"><a href="/link3.html"><span>link3</span></a></li> <li><a href="/link4.html"><span>link4</span></a></li> <li><a href="/link5.html"><span>link5</span></a></li> <li><a href="/link6.html"><span>link6</span></a></li> </ul> </div> CSS: Code:
body {
background-color: #636c08;
background-image: url(images/background.gif);
background-repeat: repeat-x;
}
h1 {
font: bold 18px Arial, Verdana, sans-serif;
color:#630;
}
#container {
margin: 0 auto;
text-align: left;
width: 775px;
}
#header {
position:realtive;
left:0px;
top:0px;
width:775px;
}
#nav{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#nav ul{
font: bold 16px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0 2px 0 0;
padding:0;
}
#nav a{
float:left;
color: white;
background: #87A00C url(images/leftcap2.png) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#nav a span{
float:left;
display:block;
background: transparent url(images/rightcap2.png) no-repeat right top;
padding:4px 9px 6px 6px;
}
#nav a span{
float:none;
}
#nav a:hover{
background-color: #C1CF2B;
color: #000000
}
#nav a:hover span{
background-color: #C1CF2B;
}
#nav #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #C1CF2B;
color:#000000;
}
#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
}
#content {
background-color:#EAEEB3;
padding: 8px;
}
#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
}
#footer {
font: bold 9px Arial, Verdana, sans-serif;
color:#FFF;
text-align:center;
}
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 </a></div>
<div id="navbar-info"><a href="#">company info </a></div>
<div id="navbar-link3"><a href="#">link3 </a></div>
<div id="navbar-link4"><a href="#">link4 </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, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Is there any way to make divs stretch to fit the content of the div? I don't want to hear about how to make them stretch to the size of the page. How do you get them to streth to fit what is in them? Can someone please tell me what the font-stretch property within CSS does? I have been playing around with the following online example, but the way the text is rendered never changes. [access the world wide web]w3schools.com/js/tryit.asp?filename=try_dom_style_fontstretch Could someone please tell me how to use the font-stretch property? I am just trying to see what it does. Thank you! I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion? Hello... I'm having some trouble. I have a container div set to 100% width. I have 2 small fixed width divs floated right and left and then a div between them that needs to stretch to fufill the 100% width while showing the background image of the container div. Works in Firefox, IE7... not so much. Any help is appreciated in advance CSS #container { width: 100%; background: url('images/topM.gif') repeat; } #leftFloat { width: 30px; float: left; } #rightFloat { #width: 30px; float: right; } #middleStretch { height: 25px; } --------------------------- XHTML <div id="container"> <div id="leftFloat"/>image goes here</div> <div id="rightFloat">image goes here</div> <div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div> <!--end #container--></div> Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance I feel so STUPID. I have DIV[a] inside DIV[a] is DIV[z] DIV[z] is 200px high. there is no height attribute et for DIV[a] shouldnt DIV[a] stretch atleast to fit in DIV[z] You can see here, in firefox, the dark background only comes down 200px. That is because its height is at 200px, i did that so you could see it. If I remove the height attribute, it dissapears completley. The menu and such on the left are within this div, so it should stretch correct? It works fine in IE. If I need to explain more let me know. Thanks right.... i have two fixed width columns and i want them to be the same height - the height of whichever has the most content. so i figured i do something like: +---------------------+ | +-----+ +----+ | | | | | | | | | | | b | | | | a | | | | | | | +----+ | | | | | | +-----+ | +---------------------+ (OK - problems with spaces and non breaking thingy.. do you get the idea though? ) the container div will stretch to fit the content, divs a and b will increase in height depending on content. so i was thinking if i set divs a and b to be 100% height it would work. however, this will do nothing if i haven't defined the height of the parent (container). so i think, ok, i'll set that to 100% as well. however this does not work. when i say "does not work" i mean the following: my container div fills the viewport. the column divs stretch from the bottom to the top of the page. -- all ok this far. when i add a load of content, i the div (a or b) will stretch beyond the viewport BUT the other one doesn't. now.. does anyone have any ideas of how i could do this? has anyone seen this anywhere? any help appreciated. d i put a div container around all my divs (so i could center them and put a bg and border) and put height at 100% but it only stretches from the top of the viewable page to the bottom. if a text content div stretches beond the page (and i have to scroll) the main content div cuts off. i set body height to 100% also. i cant figure out a way around this other than set the height in PX but since the content will be includes i have no way of know how much will be on each page. is there anyway around this, even if i have to use tables. Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally. Heres what I have: Code:
<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);
}
-->
</style>
Like that it will only display half of the gradient if the gradient is longer than 50% of the page. I want it to stretch or shrink the image so that the whole gradient is displayed. I tried using the background-size: 100% attribute but it diddnt do anything :-\ Thanks for any help. Hi there, I'm having trouble (right now Im just trying to get firefox to work) getting my #content div to stretch completely vertically. The #main div is stretching correctly, I figured I'd be able to use the same code to get the #content div to stretch. TIA - Mark HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{$title}</title>
<link rel='stylesheet' href='/css/core2.css' type='text/css' />
</head>
<body>
<div id="main" >
<img src="/images/left_shad_top.png" id="left" alt="left shader" />
<div id="content">
test
</div><!-- end of content -->
<img src="/images/right_shad_top.png" id="right" alt="right shader" />
<div style="clear:both;"></div>
<img src="/images/bottom.jpg" id="bottom"/>
</div> <!-- end of main div -->
</body>
</html>
My CSS Code:
*{
margin: 0;
padding: 0;
}
html{
background-color: red;
}
body{
height: 100%;
background-color: blue;
margin: 0 auto;
}
#main{
min-height: 100%;
background-color: yellow;
width: 850px;
background-image: url( '/images/shad_repeat.png');
background-repeat: repeat-y;
}
#content{
width: 695px;
background-color: green;
min-height: 100%;
float: left;
background-image: url('/images/page.gif');
background-color: #dcdbdc;
background-repeat: repeat-x;
}
#left{
float: left;
}
#right{
float: right;
}
#bottom{
margin-left: 50px;
}
The font-stretch property, for example:
css Code: Original - css Code font-stretch: condensed; font-stretch: condensed; doesn't seem to be adequately supported by most browsers, even though it has been part of CSS 2 for quite a while. Most references I checked seemed to point to system font dependency, i.e., if your system does not have a condensed or expanded version of that particular font installed, no change in font width will appear. Why is this? Microsoft Word has an algorithm to stretch and condense all fonts, not just those with special versions. Why can't the css standard use a similar display algorithm to implement font-stretch? I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated! Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6). Here is the website: http://www.stacyandmatt.com/ Here's the simple HTML: Code: <body>
<div id="container">
<div id="maincontent">
<div id="header">
<p> </p>
</div>
<div id="navBar">
<p> </p>
</div>
<div id="mainRight">
<img src="images/mainPic.jpg" />
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
And here is the CSS: Code: html, body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #F09;
height: 100%;
line-height: 1.5em;
}
#container {
background: #000;
height: 100%;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
}
#maincontent {
background: #000 url(../images/borderTest.jpg) repeat-y top left;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-right: 6px solid #F09;
overflow: visible;
}
#header {
background: url(../images/header.gif) no-repeat top left;
width: 100%;
height: 141px;
margin: 0px;
padding: 0px;
}
#navBar {
width: 155px;
float: left;
padding: 20px 0px 0px 40px;
margin: 0px;
color: #000000;
}
#mainRight {
width: 555px;
float: right;
padding: 20px 5px 0px 5px;
margin: 0px;
}
.spacer {
clear: both;
}
Thanks! |
|||||||