Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts

    float in divs doesn't work

    Hey.
    I'm trying to float my divs so it will have 3 different divs in a row.
    It looks like this now:


    And I want Create a row, How to and Create a database to be in the same row.
    This is my code:
    Code:
    <fieldset id="container">
    		<legend>
    			[Create Database]
    		</legend>
    		<ul id="ul_inputs">
    			<li>
    				<input type="text" class="Database_Inputs" name="row1" value="Enter_new_value" />
    			</li>
    		</ul>
    		<div style="float:left">
    			<div style="float:left; width: 130px;">
    				<input type="button" class="buttons" onClick="createRow();" value="Create a new row" />
    			</div>
    			<div style="float: right; width: 60px">
    				<a style="cursor: help;" href="#" onclick="BubbleHelp('howto');">How to</a>
    			</div>
    		</div>
    		<div style="float: right; width: 130px;">
    			<input id="createDatabase" type="submit" onClick="Enter=true;" class="buttons" value="Create database" />
    		</div>
    	</fieldset>
    The blue colored code is the relevant code and there's no CSS code for the relevant part.

    Thanks!

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    I think you should put your CSS in a separate style sheet and link it to your HTML. It just seems easier to edit and change and it is easier to see. That said you can get the results you want by positioning your divs like this.

    Code:
    <!-- Your other stuff above -->
    <div id="buttoncontainer">
        <div id="rowbutton"><input type="button" class="buttons" onClick="createRow();" value="Create A Row" /></div>
        <div id="howtolink"><a href="#howto" class="howtoclass" onclick="BubbleHelp('howto');">How to</a></div>
        <div id="createDB"><input type="submit" onClick="Enter=true;" class="buttons" value="Create database" /></div>
    </div>
    And your CSS will look like this.

    Code:
    /*style sheet for your html */
    #container{
    
    /* not knowing where you want this on the screen I can't set the position.  If it is floating with the rest of the screen then it will place itself wherever.  You can set the width and height, though, to have room to fit the form and the buttons. */
    }
    
    #buttoncontainer{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    
    #rowbutton{
        position:absolute;
        top:0;
        left:0;
        width:33%;
       height:10%;
     }
    
    #howtolink{
        position:absolute;
        top:0;
        left:33%;
        width:20%;
        height:10%;
    }
    
    #createDB{
        position:absolute;
        top:0;
        left:86%;
        width:24%;
        height:10%;
    }
    
    a {
        cursor:help;
        }
    You'll have to mess with the percentages to get things to look the way you want. But positioning the divs absolutely to the main container they will all be place at the top of the div and aligned in a single row (the left increases with each div and its width). That should get you started. If you want a second row with two of the buttons then just set the top value to 10% or whatever you set the height of the first row and reset the left to 0 and whatever the width of the first button is for the second width value.

    Also, to make CSS positioning look right in IE7 I had to add the strict DOCTYPE. It worked fine in FF without a DOCTYPE.
    Scott Stewart
    Always happy to learn from pros.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Sorry. I had a mistake. Try this.
    Code:
    /*style sheet for your html */
    #container{
       position:absolute;
       top:0;
       left:0;
       width:50%;
       height:50%;
       margin:0;
       padding:0;
    /* not knowing where you want this on the screen I can't set the position.  If it is floating with the rest of the screen then it will place itself wherever.  You can set the width and height, though, to have room to fit the form and the buttons. */
    }
    
    #ul_inputs{
    	position:absolute;
    	top:0;
    	left:0;
    	width:20%;
    	height:15%;
    	margin:0;
    	padding:0;
    }
    
    #rowbutton{
        position:absolute;
        top:0;
        left:30%;
        width:10%;
       height:15%;
     }
    
    #howtolink{
        position:absolute;
        top:15%;
        left:20%;
        width:20%;
        height:15%;
    }
    
    #createDB{
        position:absolute;
        top:15%;
        left:0;
        width:20%;
        height:15%;
    }
    
    a {
        cursor:help;
        }
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>trash me</title>
    	<link rel="stylesheet" type="text/css" href="trashstyles.css" />	
    </head>
    <body>
    	<fieldset id="container">
    			<legend>
    				[Create Database]
    			</legend>
    			<ul id="ul_inputs">
    				<li>
    					<input type="text" class="Database_Inputs" name="row1" value="Enter_new_value" />
    				</li>
    			</ul>
    		    <div id="rowbutton"><input type="button" class="buttons"  value="Create A Row" /></div>
    		    <div id="createDB"><input type="submit" class="buttons" value="Create database" /></div>
    		    <div id="howtolink"><a href="#howto" class="howtoclass" >How to</a></div>
    	</fieldset>
    
    </body>
    </html>
    Scott Stewart
    Always happy to learn from pros.

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Thanks ScottInTexas for your help! However I already have it all configured already in a CSS file, just not the buttons part.
    This is my CSS code:
    Code:
    CSS{
    	margin: 0px;
    	padding: 0px;
    }
    * {
    	margin: 0px;
    	padding: 0px;
    }
    body,div,span,fieldset,legend,input{
    	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    	margin: 0px;
    	padding: 0px;
    }
    legend{
    	font-weight: bold;
    	border: 1px solid blue;
    	border-bottom: 0px;
    	margin: 2px;
    }
    #Type{
    	position: absolute;
    	display: none;
    	background-color: lightgrey;
    	top:0px;
    	left:0px;
    	width: 0px;
    	height: 0px;
    	font-size: 8pt;
    }
    fieldset#container input.buttons{
    	border: 1px solid black;
    }
    fieldset#container{
    	margin: auto;
    	width: 400px;
    	border: 1px solid blue;
    }
    fieldset#container ul{
    	list-style: none;
    	margin: 1em;
    }
    fieldset#container ul li{
    	margin-bottom: 5px;
    }
    fieldset#container #createDatabase{
    	float:right;
    	text-decoration: underline;
    }
    fieldset#container legend input#headTitle{
    	font-weight: bold;
    	border: 0;
    }
    fieldset#container input#int{
    	background-color: lightgrey;
    	border: 1px solid black;
    }
    .BubbleHelp{
    	border: 1px dashed red;
    	width: 400px;
    	height: 50px;
    	overflow: auto;
    	display: none;
    	margin: 20px auto;
    }
    Thanks!

  • #5
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    I'm still having difficulties with the code.
    It's the same problem:


  •  

    Posting Permissions

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