...

View Full Version : Float in divs doesn't work properly



BarrMan
09-26-2007, 10:10 AM
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 it to look like this:
http://img233.imageshack.us/img233/8607/viewrfinallt5.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>

This is my CSS file:

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;
padding-left: 5px;
}
The blue colored code is the relevant code.

Thanks!

abduraooft
09-26-2007, 10:50 AM
Have a try like



<ul id="ul_inputs">
<li>
<input type="text" class="Database_Inputs" name="row1" value="Enter_new_value" />
</li>
</ul>
<div >
<div style="float:left; width: 130px;">
<input type="button" class="buttons" onClick="createRow();" value="Create a new row" />
</div>
<div style="float: left; width: 60px">
<a style="cursor: help;" href="#" onclick="BubbleHelp('howto');">How to</a>
</div>
<div style="float: left; width: 130px;">
<input id="createDatabase" type="submit" onClick="Enter=true;" class="buttons" value="Create database" />
</div>
</div>

BarrMan
09-26-2007, 01:55 PM
Thanks that works!!! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum