** Div Wrap **

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

** Div Wrap **

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Tried giving the form the border?
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Post 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).
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Can you post your exact code and the CSS that's involved in all the fields please?
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Post 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]
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Can you clarify/specify the problem? I tried your code but it's working fine (no collapsing).
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Post 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.                 |
+------------------------------+
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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>
User avatar
seodevhead
Forum Regular
Posts: 705
Joined: Sat Oct 08, 2005 8:18 pm
Location: Windermere, FL

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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:
Post Reply