Elements of a div display outside of said div - html

Question

I have two divs encased in a larger div. I thought this would make the two divs display within the parent, but for some reason they display outsie of it. I have tried every different combination of position types I can think of, and I tried display: inline. Does anyone know how I can position the two divs inside of their parent?
Here's my css file:
#Buttons {
float: center;
height: 100px;
width: 900px;
#Button1 {
width: 20px;
}
#Button2 {
width: 20px;
}
}
application.html.erb
<div id="Buttons">
<div id="Button1">
<%= link_to "button1", "#", :class "btn btn-large" %>
</div>
<div id="Button2">
<%= link_to "Button2", "#", :class "btn btn-large" %>
</div>
</div>
UPDATE: Adding inline: display to #Button1 and #Button2 makes them display within #buttons:
#Buttons {
float: center;
height: 100px;
width: 900px;
#Button1 {
width: 20px;
display: inline;
}
#Button2 {
width: 20px;
display: inline;
}
}
but I added the exact same code to #SearchBar, and it's still displaying outside of it's navbar:
#SearchBar {
height: 30px;
width: 30px;
display: inline;
#p {margin: 0px;}
}
.navbar {
height: 130px;
}
Here's the html for my entire heading:
<header class=navbar navbar-fixed-top navbar-inverse">
<div id="Buttons">
<div id="Button1">
<a class="btn btn-large btn-primary" href="/subjects/1">1</a>
</div>
<div id="Button2">
<a class="btn btn-large btn-primary" href="/subjects/2">2</a>
</div>
</div>
<div id= "SearchBar">
<form accept-charset="UTF-8" action="/things" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<p id="p">
<input id="search" name="search" type="text" />
<button class="btn" type="submit"><i class="thing-search">Go</i></button>
</p>
</form> </div>
</header>

Answer 1

There are 2 problems with your CSS:
CSS does not allow nested rules. If you're using a CSS preprocessor like Less or Sass then you can build the Less/Sass source into plain CSS, which will allow you to nest rules in your Less/Sass source, but if you have nested rules in the final CSS that is served to the client then it will fail.
See Are CSS selectors case-sensitive?. "CSS itself is case insensitive, but selectors from HTML (class and id) are case sensitive." Your id attributes are uncapitalized but your CSS selectors reference capitalized ids.
If you fix these problems, your code will work. See http://jsfiddle.net/9mmnp6Lz/.
HTML:
<div id="buttons">
<div id="button1">
b1
</div>
<div id="button2">
b2
</div>
</div>
CSS:
#buttons {
float:center;
height:100px;
width:900px;
border:1px solid red;
}
#button1 {
width:20px;
border:1px solid green;
}
#button2 {
width:20px;
border:1px solid blue;
}
Edit: It looks to me like it's the <p> in your HTML; it has a default margin that is pushing the whole <p> content down, so that it's not flush with the div that sits above it. You should be able to fix it by setting margin:0 on the <p>. See http://jsfiddle.net/9mmnp6Lz/2/.

Answer 2

if you are in CSS this is Not Work for Child of Your syntax is for LESS
LESS must export to CSSand your Selector for CSS is start with Upper Char...
One more Float : Center its undefined you can see this source of CSS
W3SCHOOLS/CSS FOR FLOAT
here code :
buttons{
background: black;
height: 100px;
width: 900px;
}
#button1 {
background : red;
width: 20px;
}
#button2 {
background : yellow;
width:20px;
}
see this Sample on JSFiddle
http://jsfiddle.net/toxmgtup/