SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    element being forced out of div

    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Paul O'B. Turns out the form wasn't in the flow. I had to add float:left;.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Gotcha. I didn't know that. Thanks again Paul O'B!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •