css Layout cannot stretch like table
newbie
Location: m
Posted: Thu, 2008-07-24 13:33
HI, i try many css template and i find it cannot stretch horizontal longer like table layout. When there got content horizontal longer than the layout, it <div> stretch horizontal longer but other <div> still at the same place. I want to make all <div> automatic stretch width 100%. Some there pls help me solve this problem.. or provide me some css layout template....
Elder
Posts: 1091
Joined: 2004-08-14
What about having a look at
Posted: Thu, 2008-07-24 15:06
What about having a look at the how to section ?
http://csscreator.com/node/22871
newbie
Posts: 2
Joined: 2008-07-24
Location: m
The page i read before and
Posted: Fri, 2008-07-25 12:41
The page i read before and it not still cannot solve the problem.... somebody can provide solution for me???
newbie
Posts: 1
Joined: 2008-07-25
3 col and faux column out
Posted: Fri, 2008-07-25 19:51
I, too, am having some issues reguarding what I need to accomplish with a 3 column layout where all three columns need to be the same (fluid) length. I have a very simple template which will ultimately "wrap around" a shopping cart. The template features 4 graphics: top.jpg, left2.jpg, right2.jpg and bottom.jpg. The top.jpg is at the top of the page, the bottom.jpg is at the bottom of the page. The right2.jpg and left2.jpg images are on the right and left columns, respectively.
You can see this template at: http://tabbitails.com
The white space that appears at the "center" of the template is actually the middle column which will ultimately contain the shopping cart (or other content, depending on the page).
The html code for the template, which has been validated, is:<!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" xml:lang="en" lang="en" >
<head>
<title>Tabbi Tails</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="www.csscreator.com" />
<link rel="stylesheet" href="css/testcss.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
<div id="top" > </div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="maincol" >
<div id="content">
<!-- START EMBED -->
<!-- END EMBED -->
</div>
</div>
<div id="rightcol" > </div>
</div>
<div id="leftcol" > </div>
</div>
<div id="footer" >
</div>
</div>
</body>
</html>
----------------
The code:
<div id="content">
<!-- START EMBED -->
<!-- END EMBED -->
</div>
actually refers to the shopping cart and is not an issue here. I only show it because it is in the template as you see in on the web page at http://tabbitails.com (the shopping cart has not been added created yet, obviously).
----------------------
The css code for the template, which has also been validated, is:
/* generated by csscreator.com */
html, body{
margin:0;
padding:0;
text-align:center;
}
#wrapper{
background-color: #ffffff;
text-align: left;
width: 100%;
vertical-align: top;
}
#pagewidth{
width:800px;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#top{
position:relative;
height:34px;
background-color:#FFFFFF;
background:url(../images/top.jpg);
background-repeat: repeat-x;
width:100%;
}
#leftcol{
width:39px;
float:left;
position:relative;
background-color:#FC6093;
background:url(../images/left2.jpg);
background-repeat:repeat-y;
}
#twocols{
width:760px;
float:right;
position:relative;
}
#rightcol{
width:39px;
float:right;
position:relative;
background-color:#FF3350;
background:url(../images/right2.jpg);
background-repeat: repeat-y;
}
#maincol{
background-color: #FFFFFF;
float: left;
display:inline;
position:relative;
width:721px;
}
#footer{
height:67px;
background-color:#3C6093;
background:url(../images/bottom.jpg);
background-repeat: repeat-x;
clear:both;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
--------------------------------------------------
As the template stands now, the left and right columns do not expand. The right.jpg and left.jpg graphics are actually 957px in length, and even when content is inserted into the middle section, both graphics remain at (I'm guessing) 39px in height, about the same as their width. I can insert a height into the css code and the images will "expand" - but only to whatever height I designate. They won't go beyond that, even if the middle expands beyond the height I have designated for the left and right columns.
I have ruled out using the faux column layout because each of the right and left graphics are different. If they were the same, I could see where the faux column layout may work in this instance.
As I have been all over this forum looking for answers, and not finding anything that quite matches what I'm trying to do here, is it possible, even, to accomplish this ONLY using css - or is this a case where the only alternative is to use a table for those 3 columns below the top and above the bottom graphics?
Any suggestions would be most helpful.