Element being forced out of div

HTML & CSS
1

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

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

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.


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

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

3

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:


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

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

5

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.


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

6

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


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

Remove the display:inline from the parent .div :slight_smile:

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

8

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