Page 1 of 1

** Div Wrap **

Posted: Sat May 06, 2006 9:14 am
by seodevhead
I have a <div> box that I want to surround a form. However for some reason the <div> is not surrounding the form that is nested in it... ex:

Code: Select all

<div id="surroundingBox">
       <form>
              <input1>
              <input2>
              ..etc...
       </form>
</div>
I have the div styled to show a 1px border but it is collapsing completely above the form (not surrounding it)... eventhough the form is nested inside the div. Any idea why this is so? FYI.. I have not set a height for the div. THanks.

Posted: Sat May 06, 2006 9:20 am
by feyd
Tried giving the form the border?

Posted: Sat May 06, 2006 9:28 am
by seodevhead
feyd wrote:Tried giving the form the border?
Yea... the form has a border of it's own, along with fieldset, but I just need this one div to wrap around the form. When I set the div to float: left... it works... but since I am trying to center this... float: left wont work (cause it won't center the div).

Posted: Sat May 06, 2006 9:33 am
by feyd
Can you post your exact code and the CSS that's involved in all the fields please?

Posted: Sat May 06, 2006 9:40 am
by seodevhead
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


[syntax="css"]#carParts #wrapper {
	width: 100%;
	text-align: center;
}

#carParts #wrapper2 {
	
	width: 500px;
	margin: 0 auto;
	text-align: left;
	border: 1px solid #773300;
	background-color: #FFFAF0;
	
}

#carParts h2 {
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	padding: 2px 0px 2px 5px;
	border-bottom: 1px solid #773300;
	background-color: #FFD575;
}

#carParts label {
	display: block;
	margin: 8px 3px 1px 5px;
	font-weight: bold;
}

#carParts input {
	display: block;
	margin: 2px 0px 2px 5px;
	border: 1px solid #000;
	width: 300px;
}
And associated XHTML....

Code: Select all

<div id="wrapper">
    <div id="wrapper2">
        <h2>Enter Car Parts</h2>
	<form action="car-parts.php" method="post">
	
	<label for="parts">Enter Car Parts:</label>
	<input type="text" name="part1" id="parts" maxlength="250" value="<?php 
		if (isset($row['parts'])) echo $row['parts']; ?>" />
	<input type="text" name="part2" id="parts" maxlength="250" value="<?php 
		if (isset($row['parts'])) echo $row['parts']; ?>" />
	<input type="text" name="part3" id="parts" maxlength="250" value="<?php 
		if (isset($row['parts'])) echo $row['parts']; ?>" />
    </div>
</div>

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Sat May 06, 2006 11:01 am
by matthijs
Can you clarify/specify the problem? I tried your code but it's working fine (no collapsing).

Posted: Sat May 06, 2006 11:15 am
by seodevhead
Well I am making a box (#wrapper2) that is centered on the page and this box has 2 parts. The top of the box is the <h2> header (which is working fine)... and the bottom part of the #wrapper2 div box contains the form. The problem is, anything within the <form> element is not being placed into the #wrapper div. In other words, #wrapper2 is not wrapping around the form. It is collapsing right after the header.

Maybe I can draw a picture in ascii of what it looks like with the problem... and what it should look like:

Current problem:

Code: Select all

+-----------------------------+
|     Header <h2>             |
+-----------------------------+
    Enter Parts:
    Rest of form here...
    etc etc.
What it should look like (with the div#wrapper2 wrapping around the form):

Code: Select all

+-----------------------------+
|     Header <h2>             |
+-----------------------------+
|    Enter Parts:             |
|    Rest of form here...     |
|    etc etc.                 |
+------------------------------+

Posted: Sat May 06, 2006 1:25 pm
by matthijs
In what browser are you looking? For me it works fine, exactly as your last example (in both FF and IE 6 on winxp).

Here's the code I used:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#carParts #wrapper {
        width: 100%;
        text-align: center;
}
#carParts #wrapper2 {
        width: 500px;
        margin: 0 auto;
        text-align: left;
        border: 1px solid #773300;
        background-color: #FFFAF0;
       
}
#carParts h2 {
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
        padding: 2px 0px 2px 5px;
        border-bottom: 1px solid #773300;
        background-color: #FFD575;
}
#carParts label {
        display: block;
        margin: 8px 3px 1px 5px;
        font-weight: bold;
}
#carParts input {
        display: block;
        margin: 2px 0px 2px 5px;
        border: 1px solid #000;
        width: 300px;
} 
-->
</style>
</head>
<body id="carParts">
<div id="wrapper">
    <div id="wrapper2">
        <h2>Enter Car Parts</h2>
        <form action="car-parts.php" method="post">
       
        <label for="parts">Enter Car Parts:</label>
        <input type="text" name="part1" id="parts" maxlength="250" value="<?php
                if (isset($row['parts'])) echo $row['parts']; ?>" />
        <input type="text" name="part2" id="parts" maxlength="250" value="<?php
                if (isset($row['parts'])) echo $row['parts']; ?>" />
        <input type="text" name="part3" id="parts" maxlength="250" value="<?php
                if (isset($row['parts'])) echo $row['parts']; ?>" />
        </form>
    </div>
</div>
</body>
</html>

Posted: Sat May 06, 2006 2:24 pm
by seodevhead
Hey matthijs, Thanks soo much for running a test on this for me. After looking over your working page and mine, I couldn't find any differences, but when I scrapped the file and started anew with your code... IT WORKS!!! There must have been something in my code I missed somehow... but hey... I'm happy. So thanks a ton for helping me out and taking your time to give me assistance. I am in debt. Thanks soo much!

Posted: Sat May 06, 2006 3:22 pm
by matthijs
No problem. Glad you got it working. I love css so every little problem is a challenge. Well, most of the times :wink: