div overflow help

[redimp]

this is the code i'm having problems with:



<style type="text/css">

body {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
margin : 0;
padding : 0;
}

/* text */

h1 {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
line-height:30px;
}

/* div classes */

div.row {
position:relative;
left:10px;
width:326px;
height:20px;
z-index:1;
margin-bottom:8px;
text-align:right;
}

div.cell_title, div.cell_content {
position:absolute;
top:0px;
float:left;
padding:0px 0px 0px 8px;
border:1px solid #E4E4E4;
text-align:left;
line-height:17px;

}

div.cell_title {
background-color: #E4E4E4;
left:0px;
width:100px;
z-index:2;
}

div.cell_content {
background-color:#FCFCFC;
left:100px;
width:224px;
z-index:3;

}

/* form elements */

.input {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:15px;
width:213px;
border:0;
}

.textarea {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:100px;
width:213px;
border:0;
overflow:auto;
}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
<div class="cell_title"><label for="name">name:</label></div>
<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
<div class="cell_title"><label for="email">email:</label></div>
<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
<div class="cell_title"><label for="message">message:</label></div>
<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>



My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!

[jscheuer1]

Style alone without content is mostly meaningless. One thing I notice is a fair amount of both absolute and relative positioning. These are the things that will tend to get you into trouble when content then overlaps.

[redimp]

Any other ideeas..? I need a solution to this problem.. and right now I can't think of a way to solve this.. :(

[jscheuer1]

As I said, the style is basically meaningless without the content, so:

Please provide your code -

.

OR:

Put code tags:




code goes here



around your code in a message here so that it appears like so:




code goes here

[redimp]

it is style without content because i striped down the page that i was having problems with but I left the same css code..

this is the website: http://www.at4t.ro/index.php?menu=news
but it is made with tables.. I am currently working on rebuilding it using only css..

I ran into this problem and I can't seem to find the solution..
go to the news section (the url I provided) and click on view..
what I cannot do is make a the container of the text strech (verticaly) without overlaping on the content that is after it (below it).. in this case over the "go back" link..
the code that i posted earlier is the css version of the page you can see online but built with tables..

I hope I was clear enough because I am preety desperate and no one seems to know how to solve this..

[mburt]

I don't think that was the question in case, iteamweb. The OP posted a code that frequently uses position absolute, which causes items to be placed on a page by pixel left and top regardless of the surrounding elements. Once you do this your content may become overlapped.

[Shotgun Ninja]

Heh, that happened to my friend's myspace page. Find the code in question and make sure the style has the object fixed to the page at the position in question. Also, if you are having some layering problems, and you want to just put some layers below others, just change the z-index.

| EDIT |

By the way, you CANNOT BUILD A PAGE USING ONLY CSS. Keep the tables. CSS is a style applicator for pages. It's like the difference between plaster and paint. HTML is the plaster, for building the page, and CSS is the paint for making it look pretty. Wow, that was fruity. Sorry guys.