element being forced out of div

**nichemtktg** · May 8, 2012 13:34

The button, in the form, is forcing the lower right button out of the yellow div. Why?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php session_start(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ebop </title>
<style type="text/css">
.button {margin:0px;padding:0px;width:82px;height:40px;font-size:12px;vertical-align:top;}
.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;display:none;border-style:solid;border-width:4px;}
.div{margin:0px 0px 0px 0px;float:left;overflow:visible;width:170px;height:85px;background:yellow;}
.wrapper{width:595px;}
button.button:hover div.message {display:block;}
</style>
</head>
<body>
<?php
echo '<div class="div">'; //button div  
   echo '<button class="button" >Item <br/>Info';
   echo '</button>';
 
   echo '<button class="button" >Company Info';
   echo '</button>';
 
   echo '<form action="cart.php" method="post" style="height:40px;width:82px;" >';
          echo '<button class="button" type="submit" >Save for Printing</button>';
   echo '</form>';
        
   echo '<button class="button" >email Question';
   echo '</button>';
echo '</div>'; //closes button div
?>
</body>
</html>

**Paul O'B** · May 8, 2012 14:12

Hi,

Make sure you post html (from view source) and not php as this is the css forum and we don't understand php (well I don't anyway

).

Taking a guess at your problem I'd say that you haven't contained the floats and that the div is too small in height. Remove the height from the div and then use overflow:hidden to contain the floated children.

Code:

.div {
	margin:0;
	float:left;
	overflow:hidden;
	width:170px;
	background:yellow;
}

If that's not the problem then I'll need a working example in html and css to debug further

**nichemtktg** · May 8, 2012 14:33

Thanks, but that didn't work. It' s the form that's the problem. It must be taking up more space than I can see on Firebug. When I comment-out the form , no problem, but I need the form.

Here's the script without the PHP:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php session_start(); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ebop </title>
<style type="text/css">
.button {margin:0px;padding:0px;width:82px;height:40px;font-size:12px;vertical-align:top;}
.div{margin:0px;float:left;overflow:hidden;width:170px;background:yellow;}
.wrapper{width:595px;}
</style>
</head>
<body>

<div class="div">	  
   <button class="button" >Item <br/>Info
   </button> 
	
   <button class="button" >Company Info
   </button> 
	
   <form action="cart.php" method="post" style="height:40px;width:82px;" >
      <button class="button" type="submit" >Save for Printing</button> 
   </form>
			   
   <button class="button" >email Question
   </button>
</div>
</body>
</html>

**nichemtktg** · May 8, 2012 14:46

Thanks for your help Paul O'B. Turns out the form wasn't in the flow. I had to add float:left;.

**Paul O'B** · May 8, 2012 14:48

Hi,

If you want the button inside the form to be side by side with the element above then you need to either float all the elements including the form or set the form to display:inline.

Code:

.div form{display:inline}

Of course that means the width and height won't take effect on the form but you don't need those anyway.

**nichemtktg** · May 8, 2012 15:29

I tried substituting display:inline; for float:left; and I got all the buttons on a single row (side by side), but the yellow div went crazy. Is that what you meant?

Here's the code. Please note the three ref to display:inline;. They were previously ref to float:left; :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php session_start(); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Save money" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>ebop </title>
<style type="text/css">
.button {display:inline;margin:0px;padding:0px;width:82px;height:40px;font-size:12px;vertical-align:top;}
.div{margin:0px;display:inline;overflow:hidden;width:180px;background:yellow;vertical-align:top;}
.wrapper{width:595px;}
</style>
</head>
<body>

<div class="div">	  
   <button class="button" >Item <br/>Info
   </button> 
	
   <button class="button" >Company Info
   </button> 
	
   <form action="cart.php" method="post" style="height:40px;width:82px;display:inline;" >
      <button class="button" type="submit" >Save for Printing</button> 
   </form>
			   
   <button class="button" >email Question
   </button>
</div>
</body>
</html>

**Paul O'B** · May 8, 2012 15:38

Remove the display:inline from the parent .div

Remember inline elements cannot take widths so when you set the parent to inline it just stretches with content.

**nichemtktg** · May 8, 2012 15:44

Gotcha. I didn't know that. Thanks again Paul O'B!

User Tag List

Thread: element being forced out of div

Thread Tools

Display

element being forced out of div

Bookmarks

Bookmarks

Posting Permissions