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
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
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
