PDA

View Full Version : Resolved move other divs on expand



cinek
Sep 20th, 2010, 07:58 PM
I have a form at the top of the page & 3 boxes below. The textarea of that form expands with text. How can I make the 3 boxes move down, when the textarea expands and move back up when it shrinks?

DrDOS
Sep 20th, 2010, 08:07 PM
Just don't let the textarea expand, set the size, rows=10 cols=40. When it starts to fill with text you will see a scrollbar. You might be able to set the divs to position:relative but I suspect that would cause even more problems.

cinek
Sep 20th, 2010, 08:09 PM
I want the text area to expand

I set the divs position to relative already - but no luck ;/

SB65
Sep 20th, 2010, 08:11 PM
Um, if the boxes below aren't moving as the text box expands, then you're perhaps/presumably using absolute positioning. If this is the case, then don't use absolute positioning, and the divs will move down accordingly.

Can you give a link to your page?

cinek
Sep 20th, 2010, 08:31 PM
SB65, thanks for your reply. I'm creating the site on my pc. don't have access to a server

the form above is set to absolute, the divs(boxes) below are set to relative... as the form expands, it simply moves behind the boxes(divs)

SB65
Sep 20th, 2010, 08:38 PM
That'll be because the form is positioned absolutely - which takes it out of the flow of the page, and hence any other elements on the page have no knowledge as it were, of its positioning. So the elements below it stay in the same place regardless of the length of the form.

Your best approach would be to remove the absolute positioning - no need to replace this with position:relative, just remove it.

In the absence of a link, post your whole code here (wrap it in the # (code) tags).

cinek
Sep 20th, 2010, 08:44 PM
thanks, I changed it but after setting the form to relative, the 2 boxes (out of 3) are moved down a bit. Also when the text area is expanding down, only these 2 boxes are moved down.

here's the 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>Zadanie 1</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/section1.js"></script>
<script type="text/javascript" src="js/section2.js"></script>
<script type="text/javascript" src="js/section3.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/quotes.js"></script>
<script type="text/javascript" src="js/adjustSections.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/autoresize_jQuery_Plugin.js"></script>
<script type="text/javascript" src="js/textarea.js"></script>
<script type="text/javascript">$(document).ready( function() {$('textarea#tekst').autoResize()});</script>
</head>

<body>

<!-- Main wrapper for the whole content -->
<div class="main">


<!-- Header -->
<div id="header">
<h1><span>Lorem ipsum</span> dolor sit amet...</h1>
</div>

<!-- End Header -->

<!-- Form wrapper -->
<div class="form_wrapper">

<!-- Form id div -->
<div id="form">
<span id="wybierz">Wybierz sekcje&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</span>&ensp;
<select id="sections">
<option value="sekcjaA">Sekcja A</option>
<option value="sekcjaB">Sekcja B</option>
<option value="sekcjaC">Sekcja C</option>
</select>

<br /> <br /><br /><br />

<span id="wprowadz">Wprowadz tekst&ensp;&ensp;&ensp;&ensp;&ensp;</span>&ensp;
<textarea cols="45" rows="5" name="tekstForm" id="tekst" onclick="this.value=''"> </textarea>

<br/><br />

<input type="submit" value="Wykonaj" id="wykonaj" onclick="copyText(); adjustT()" />

</div>
<!-- End Form id div -->

</div>
<!-- End Form wrapper -->

<!-- Content wrapper -->
<div class="content">

<!-- Quote(s) wrapper -->
<div class="quotes_wrapper">

<!-- Quotes -->
<div id="quotes">
Textblock for quotes
</div>
<!-- End quotes -->

</div>
<!-- End quotes wrapper -->



<!-- Wrapper for all section - to set the height -->
<div class="sections_wrapper" id="clearfix">

<!-- Section A Wrapper -->
<div class="section1_wrapper">
<h1>Sekcja A</h1>

<!-- Section A -->
<div id="section1">

<!-- section1Text -->
<div id="section1Text">

</div>
<!-- End section1Text -->


<!-- Color Bars Wrapper-->
<div class="color_wrapper">


<a id="color1" href="javascript:section1Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section1Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section1Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section1Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section1Color5()"> &nbsp; </a>
<!--Color bars -->

</div>
<!-- End of Color Bars Wrapper -->
</div>
<!-- End Section A -->

</div>
<!-- End Section A wrapper -->

<!-- Section B wrapper -->
<div class="section2_wrapper">
<h1>Sekcja B</h1>

<!-- Section B -->
<div id="section2">

<!-- Section2Text - for text layout -->
<div id="section2Text">

</div>
<!-- End section2Text -->

<!-- Color Bars Wrapper-->
<div class="color_wrapper">

<!--Color bars -->
<a id="color1" href="javascript:section2Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section2Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section2Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section2Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section2Color5()"> &nbsp; </a>
</div>
<!-- End of Color Bars Wrapper -->

</div>
<!-- End section B -->

</div>
<!-- End ection B wrapper -->

<!-- Section C wrapper -->
<div class="section3_wrapper">
<h1>Sekcja C</h1>

<!-- Section C -->
<div id="section3">

<!-- section3Text -->
<div id="section3Text">

</div>
<!-- End section4Text -->

<!-- Color Bars Wrapper-->
<div class="color_wrapper">

<!--Color bars -->
<a id="color1" href="javascript:section3Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section3Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section3Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section3Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section3Color5()"> &nbsp; </a>
</div>
<!-- End of Color Bars Wrapper -->

</div>
<!-- End Section C -->

</div>
<!-- End Section C wrapper -->
</div>
<!-- End of content wrapper -->


<!-- End of Sections_wrapper -->
</div>

<!-- Footer wrapper -->
<div class="footer_wrapper">

<!-- Footer -->
<div id="footer">

</div>
<!-- End Footer -->

</div>
<!-- End Footer wrapper -->

</div>
<!-- End Main wrapper -->



</body>
</html>


and the css



@charset "utf-8";
/* CSS Document */

/* Body */
body {background:url(../images/tlo.png) repeat-x; font-family: Arial, Helvetica, sans-serif;}
h1 {color: #FFF;}


/* Clear fix */
#clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#clearfix {display: inline-table;}
* html #clearfix {height: 1%}
#clearfix {display: block;}

/* Links */
a:link, a:visited {font-weight: bold; color:#959595; text-decoration: none;}
a:hover {text-decoration: underline;}


/*Main Div */
div.main {height: 900px; width: 960px; margin: auto;}


/* Content div */
div.content {background-color: #0076a3;}


/* Header */
div#header {text-align: right; clear: both;}

div#header span {color: #0076a3;}

div#header h1 {color: #ebebeb;}


/* Sections */
div.section1_wrapper, div.section2_wrapper, div.section3_wrapper {float: left;}

div.section1_wrapper {margin: 20px 20px 40px 50px;}
div.section2_wrapper {margin: 20px 20px 40px 20px;}
div.section3_wrapper {margin: 20px 20px 40px 20px;}

div#section1, div#section2, div#section3 {position: relative; width: 260px; min-height: 380px; background-color: #ebebeb; float: left; }

div#section1Text, div#section2Text, div#section3Text {margin: 20px 20px; color: #000;}


/* Color bars General */
div.color_wrapper {position: absolute; bottom: 0px; border: 1px solid #000; left: 58px; width: 200px; }

a#color1, a#color2, a#color3, a#color4, a#color5 {position: relative; width: 20px; height: 20px; margin-top: 20px; display: inline-block; margin-left: 10px; left: 33px;}
a#color1 {background-color: #ed1c24;}
a#color2 {background-color: #736257;}
a#color3 {background-color: #620460;}
a#color4 {background-color: #e87e01;}
a#color5 {background-color: #00a650;}
a#color1:hover {padding-top: 20px; margin-top: 0;}
a#color2:hover {padding-top: 20px; margin-top: 0;}
a#color3:hover {padding-top: 20px; margin-top: 0;}
a#color4:hover {padding-top: 20px; margin-top: 0;}
a#color5:hover {padding-top: 20px; margin-top: 0;}


/* Quotes */
div.quotes_wrapper {width: 220px; height: 200px; background-color: #6dcff6; border: 10px solid #FFF; right: 20px; bottom: 20px; position: relative; }

div#quotes {margin: auto; font-weight: bold; color: #FFF; margin: 30px;}


/* Form */
div.form_wrapper {position: relative; float: right;}

div#form select, div#form textarea {max-width: 400px; min-width: 400px; display: block; position: relative;}
div#form select {right: 40px;}
div#form textarea {height: 80px; position: relative; bottom: 70px; right: 40px;}

div#form span {color: #FFF; border-bottom: 1px dotted #FFF; font-size: 12px; float: right}

div#form span#wybierz {position: relative; top: 20px; right: 460px;}
div#form span#wprowadz {position: relative; bottom: 40px; right: 460px;}
div#form input#wykonaj {width: 100px; height: 20px; background-image:url(../images/tlo_button.png); color: #FFF; font-weight: bold; float: right; position: relative; right: 348px; bottom: 90px; border: none; font-size: 12px;}


/* Footer */
div.footer_wrapper {float: left; width: 960px; margin: auto;}
div#footer {font-size: 12px; color: #959595; text-align: right;}
div#footer span {font-weight: bold; color: #959595;}

cinek
Sep 20th, 2010, 09:01 PM
ok , Ive done it. Now all the boxes move down but for some reason the form wrapper is too high..... any ideas why? I set the border to border: 1px solid #000 and it's showing that it's way too high..... therefore pushing down the boxes w/o the need for it

SB65
Sep 20th, 2010, 09:16 PM
OK, you can take the position:relative off .form_wrapper - no need for it.

You're resizing the textarea with jQuery, right? Can't test this, but if you add:


.sections_wrapper{clear:both}

to your css then the sections will all line up, and will move down as the textarea expands.

That seems to leave a big gap after the form at the moment, which is really coming from your markup for the form, which is a bit messy with all those line breaks. I had a bit of a play around, and made this html:


<!-- Form id div -->
<div id="form">
<label for="sections" id="wybierz">Wybierz sekcje</label>
<select id="sections">
<option value="sekcjaA">Sekcja A</option>
<option value="sekcjaB">Sekcja B</option>
<option value="sekcjaC">Sekcja C</option>
</select>


<label for="tekst" id="wprowadz">Wprowadz tekst</label>
<textarea cols="45" rows="5" name="tekstForm" id="tekst" onclick="this.value=''"> </textarea>


<input type="submit" value="Wykonaj" id="wykonaj" onclick="copyText(); adjustT()" />

</div>
<!-- End Form id div -->


with this css:


/* Form */
div.form_wrapper {position: relative; float: right;width:580px;padding-top:20px}

div#form select, div#form textarea {max-width: 400px; min-width: 400px; display: block;margin-bottom:25px}
div#form textarea {height: 80px;}

div#form label {color: #FFF; border-bottom: 1px dotted #FFF; font-size: 12px; float: left;clear:left;width:120px;margin-right:20px;margin-bottom:15px}

div#form input#wykonaj {width: 100px; height: 20px; background-image:url(../images/tlo_button.png); color: #FFF; font-weight: bold; float: left;margin-left:140px; border: none; font-size: 12px;}

which gets rid of all of your top/bottom/right positioning, and all the &nbsp; and <br/>.

EDIT: And this sorts out the div being too high as well.

cinek
Sep 20th, 2010, 09:56 PM
thanks a lot, but the form_wrapper width needs to be larger as the section on the left will not adjust with section 2 and 3. I think the textarea, button and one of the labels need to be positioned relatively as they are not aligned properly (too much space between them)

SB65
Sep 20th, 2010, 09:59 PM
Don't get hung up on position:relative - if you need less space amend the margins or padding rather than left/top - that way you'll end up with a more consistent display cross-browser.

I don't quite understand why .form-wrapper needs more width, but if it does, fine.

cinek
Sep 20th, 2010, 10:01 PM
here's what it looks like after making the changes

this is after moving the form elements closer together... as you can see by the border, the form_wrapper is still the same height as before :(

as to why form_wrapper needs more width (I might be wrong so please correct me if I am).... it needs to be wider so that it can also push down on the section on the left (see image) as it's only pushing down the middle and right sections

any ideas what's causing the form_wrapper to be so high?

edit: back to the form_wrapper width - I could also create a blank div for the while page width which will push all sections down - not sure which way is better?

SB65
Sep 20th, 2010, 10:12 PM
You need:


.sections_wrapper{clear:both}

to push that left hand section down as per my previous post.

Here's my complete amended code if it helps. .form-wrapper shouldn't be that high with the posted 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=utf-8" />
<title>Zadanie 1</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */

/* Body */
body {background:url(../images/tlo.png) repeat-x; font-family: Arial, Helvetica, sans-serif;}
h1 {color: #FFF;}


/* Clear fix */
#clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#clearfix {display: inline-table;}
* html #clearfix {height: 1%}
#clearfix {display: block;}

/* Links */
a:link, a:visited {font-weight: bold; color:#959595; text-decoration: none;}
a:hover {text-decoration: underline;}


/*Main Div */
div.main {height: 900px; width: 960px; margin: auto;}


/* Content div */
div.content {background-color: #0076a3;}


/* Header */
div#header {text-align: right; clear: both;}

div#header span {color: #0076a3;}

div#header h1 {color: #ebebeb;}


/* Sections */
div.section1_wrapper, div.section2_wrapper, div.section3_wrapper {float: left;}

div.section1_wrapper {margin: 20px 20px 40px 50px;}
div.section2_wrapper {margin: 20px 20px 40px 20px;}
div.section3_wrapper {margin: 20px 20px 40px 20px;}

div#section1, div#section2, div#section3 {position: relative; width: 260px; min-height: 380px; background-color: #ebebeb; float: left; }

div#section1Text, div#section2Text, div#section3Text {margin: 20px 20px; color: #000;}


/* Color bars General */
div.color_wrapper {position: absolute; bottom: 0px; border: 1px solid #000; left: 58px; width: 200px; }

a#color1, a#color2, a#color3, a#color4, a#color5 {position: relative; width: 20px; height: 20px; margin-top: 20px; display: inline-block; margin-left: 10px; left: 33px;}
a#color1 {background-color: #ed1c24;}
a#color2 {background-color: #736257;}
a#color3 {background-color: #620460;}
a#color4 {background-color: #e87e01;}
a#color5 {background-color: #00a650;}
a#color1:hover {padding-top: 20px; margin-top: 0;}
a#color2:hover {padding-top: 20px; margin-top: 0;}
a#color3:hover {padding-top: 20px; margin-top: 0;}
a#color4:hover {padding-top: 20px; margin-top: 0;}
a#color5:hover {padding-top: 20px; margin-top: 0;}


/* Quotes */
div.quotes_wrapper {width: 220px; height: 200px; background-color: #6dcff6; border: 10px solid #FFF; right: 20px; bottom: 20px; position: relative; }

div#quotes {margin: auto; font-weight: bold; color: #FFF; margin: 30px;}


/* Form */
div.form_wrapper {position: relative; float: right;width:580px;padding-top:20px}

div#form select, div#form textarea {max-width: 400px; min-width: 400px; display: block;margin-bottom:25px}
div#form textarea {height: 80px;}

div#form label {color: #FFF; border-bottom: 1px dotted #FFF; font-size: 12px; float: left;clear:left;width:120px;margin-right:20px;margin-bottom:15px}

div#form input#wykonaj {width: 100px; height: 20px; background-image:url(../images/tlo_button.png); color: #FFF; font-weight: bold; float: left;margin-left:140px; border: none; font-size: 12px;}


/* Footer */
div.footer_wrapper {float: left; width: 960px; margin: auto;}
div#footer {font-size: 12px; color: #959595; text-align: right;}
div#footer span {font-weight: bold; color: #959595;}

.sections_wrapper{clear:both}
</style>
<script type="text/javascript" src="js/section1.js"></script>
<script type="text/javascript" src="js/section2.js"></script>
<script type="text/javascript" src="js/section3.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/quotes.js"></script>
<script type="text/javascript" src="js/adjustSections.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/autoresize_jQuery_Plugin.js"></script>
<script type="text/javascript" src="js/textarea.js"></script>
<script type="text/javascript">$(document).ready( function() {$('textarea#tekst').autoResize()});</script>
</head>

<body>

<!-- Main wrapper for the whole content -->
<div class="main">


<!-- Header -->
<div id="header">
<h1><span>Lorem ipsum</span> dolor sit amet...</h1>
</div>

<!-- End Header -->

<!-- Form wrapper -->
<div class="form_wrapper">

<!-- Form id div -->
<div id="form">
<label for="sections" id="wybierz">Wybierz sekcje</label>
<select id="sections">
<option value="sekcjaA">Sekcja A</option>
<option value="sekcjaB">Sekcja B</option>
<option value="sekcjaC">Sekcja C</option>
</select>


<label for="tekst" id="wprowadz">Wprowadz tekst</label>
<textarea cols="45" rows="5" name="tekstForm" id="tekst" onclick="this.value=''"> </textarea>


<input type="submit" value="Wykonaj" id="wykonaj" onclick="copyText(); adjustT()" />

</div>
<!-- End Form id div -->

</div>
<!-- End Form wrapper -->

<!-- Content wrapper -->
<div class="content">

<!-- Quote(s) wrapper -->
<div class="quotes_wrapper">

<!-- Quotes -->
<div id="quotes">
Textblock for quotes
</div>
<!-- End quotes -->

</div>
<!-- End quotes wrapper -->



<!-- Wrapper for all section - to set the height -->
<div class="sections_wrapper" id="clearfix">

<!-- Section A Wrapper -->
<div class="section1_wrapper">
<h1>Sekcja A</h1>

<!-- Section A -->
<div id="section1">

<!-- section1Text -->
<div id="section1Text">

</div>
<!-- End section1Text -->


<!-- Color Bars Wrapper-->
<div class="color_wrapper">


<a id="color1" href="javascript:section1Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section1Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section1Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section1Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section1Color5()"> &nbsp; </a>
<!--Color bars -->

</div>
<!-- End of Color Bars Wrapper -->
</div>
<!-- End Section A -->

</div>
<!-- End Section A wrapper -->

<!-- Section B wrapper -->
<div class="section2_wrapper">
<h1>Sekcja B</h1>

<!-- Section B -->
<div id="section2">

<!-- Section2Text - for text layout -->
<div id="section2Text">

</div>
<!-- End section2Text -->

<!-- Color Bars Wrapper-->
<div class="color_wrapper">

<!--Color bars -->
<a id="color1" href="javascript:section2Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section2Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section2Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section2Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section2Color5()"> &nbsp; </a>
</div>
<!-- End of Color Bars Wrapper -->

</div>
<!-- End section B -->

</div>
<!-- End ection B wrapper -->

<!-- Section C wrapper -->
<div class="section3_wrapper">
<h1>Sekcja C</h1>

<!-- Section C -->
<div id="section3">

<!-- section3Text -->
<div id="section3Text">

</div>
<!-- End section4Text -->

<!-- Color Bars Wrapper-->
<div class="color_wrapper">

<!--Color bars -->
<a id="color1" href="javascript:section3Color1()"> &nbsp; </a>
<a id="color2" href="javascript:section3Color2()"> &nbsp; </a>
<a id="color3" href="javascript:section3Color3()"> &nbsp; </a>
<a id="color4" href="javascript:section3Color4()"> &nbsp; </a>
<a id="color5" href="javascript:section3Color5()"> &nbsp; </a>
</div>
<!-- End of Color Bars Wrapper -->

</div>
<!-- End Section C -->

</div>
<!-- End Section C wrapper -->
</div>
<!-- End of content wrapper -->


<!-- End of Sections_wrapper -->
</div>

<!-- Footer wrapper -->
<div class="footer_wrapper">

<!-- Footer -->
<div id="footer">

</div>
<!-- End Footer -->


</div>
<!-- End Footer wrapper -->

</div>
<!-- End Main wrapper -->



</body>
</html>

cinek
Sep 20th, 2010, 10:18 PM
thanks, I forgot to add that. hmmm your the html you posted seems to be different from my one? the form elements are close together etc - can you tell me what's different (except the changes you posted in your previous post)?

SB65
Sep 20th, 2010, 10:22 PM
In the html in post #7 I've removed all the spaces and carriage returns that you were using to (partially) position the elements in the form. Additionally I've replaced your span tags with more semantic label elements. The css in post #7 is amended accordingly.

cinek
Sep 20th, 2010, 10:30 PM
thank you very much! So basically the break lines were causing the form_wrapper to expand in height?

SB65
Sep 20th, 2010, 10:32 PM
They were, yes, but so were some other elements of your css - which is why I suggested the changes.

cinek
Sep 20th, 2010, 10:33 PM
Thanks a lot :) finally got it solved