...

View Full Version : float in divs doesn't work



BarrMan
09-24-2007, 11:08 PM
Hey.
I'm trying to float my divs so it will have 3 different divs in a row.
It looks like this now:
http://img212.imageshack.us/img212/9066/viewrq3.jpg

And I want Create a row, How to and Create a database to be in the same row.
This is my 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!

ScottInTexas
09-25-2007, 02:06 AM
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.



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




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

ScottInTexas
09-25-2007, 02:37 AM
Sorry. I had a mistake. Try this.


/*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



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

BarrMan
09-25-2007, 01:03 PM
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:

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!

BarrMan
09-25-2007, 09:39 PM
I'm still having difficulties with the code.
It's the same problem:
http://img212.imageshack.us/img212/9066/viewrq3.jpg



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum