Forum Moderators: not2easy
I've been trying to make it work for several days now and I have no idea what else I could try.
What I have: I have a table with four columns, each 25% of window width. There is a div (id="indexcornercontainer" in code) inside every column. Also I have a smaller div (id="divname" in code) inside the big div that should act as a div header.
What I need:
1(red on pic). I need the bigger div to take 100% of one column height no matter how much text it contains. All four divs in four columns are supposed to be of equal height.
2(blue on pic). I want the small div (divname) to have width of the text it contains, not more, not less.
Code:
Html
<!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=utf-8" />
<title></title>
<link href="main2.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="maincontainerindextwo">
<table cellpadding="0px" cellspacing="0px" border="0px" width="100%" height="auto">
<td width="25%" height="100%">
<div id="indexcornercontainer">
<div id="divname">
<p>div name</p>
</div>
<a> Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div </a>
</div>
</td>
<td width="25%" height="100%">
<div id="indexcornercontainer">
<div id="divname">
<p>div name</p>
</div>
<a> Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div </a>
</div>
</td>
<td width="25%" height="100%">
<div id="indexcornercontainer">
<div id="divname">
<p>div name</p>
</div>
<a> Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div </a>
</div>
<td width="25%" height="100%">
<div id="indexcornercontainer">
<div id="divname">
<p>div name</p>
</div>
<a> Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div Some text in this div </a>
</div>
</td>
</table>
</div>
</body>
</html>
Css
@charset "utf-8";
/* CSS Document */html, body{margin:0px; padding:0px; height:100%; background-color:#FFFFFF}
#maincontainerindextwo{width:auto; height:auto; margin-bottom:40px; padding:0px}
#indexcornercontainer{width:auto; height:100%; padding:0px; margin:10px; border-width:0px; /*background-color:#f3f3f3;*/ border:1px solid #999999}
#serviceindextext{}
#serviceindextext a{padding:10px; color:#252424; text-decoration:none; display:block; cursor:pointer; /*background-color:#CCCCCC;*/}/*rounded corners and divnames*/
#divname{position:relative; right:-15px; top:-0.8em; width:100%; font-size:80%; padding-left:5px; padding-right:5px}
#divname p{background-color:#FFFFFF}
Thanks.
[edited by: tedster at 6:38 am (utc) on July 1, 2008]
not sure I quite understand question 2 - all the divs in your example contain enough text to fill the 25% width dictated by the table cell width so as wide as content is dictated by that?
as for q.1, why bother with the divs, can you not use the table cell <td> itself for the backgrounds to make the columns all appear to be the same length
maybe I'm misunderstanding both questions though :o
maybe it's that you think the divs should take their height from the table cells via the 100% inheritance though?
if so no that still probably won't work unless the inheritance is passed through the entire dom tree
e.g.
<html>
.<body>
..<div id="maincontainerindextwo">
...<table>
....<td>
.....<div id="indexcornercontainer">
q2 - now those divs have the width of one column (25% of screen space) but I need them to be as wide as the text that they contain is. Their right border is supposed to be right after the last letter, not at the end of the column. For example if "divname" has a word "hi" in it, I want that div to have the width of two letters, not 25% of screen space. Yea I know that my css example has "divname width=100%", but I just have no idea what to write instead :), width=100% is definately not what I need.
q1 - I am using divs to make round corners, not sure if its possible with table cell only. So if one of parent elements, like parent div or body have height=auto then its not possible, right?
