Elements of a div display outside of said div

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="&#x2713;" /></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>

Just to check: Your CSS is non-standard. Are you using [LESS](http://lesscss.org/)? — JDB, Dec 07 '14 at 05:36
@user2570380 Actually I just needed to add display: inline. However, I added that same code to my search bar, but it's still displaying outside of its parent. — , Dec 07 '14 at 06:00

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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

edited May 23 '17 at 12:21

Community

1
1

answered Dec 07 '14 at 05:59

bgoldst

34,190
6
38
64

Oops, the capitalization discrepency was a typo; I fixed it. And #Button1 and #Button2 work even while nested, but #Searchbar doesn't work even while written seperately. I posted my new css above. – Dec 07 '14 at 06:06
I'll need to see your HTML to know why it's not working as you expect. I can create a div within a div, apply your CSS, and see the containment as expected: http://jsfiddle.net/9mmnp6Lz/1/. – bgoldst Dec 07 '14 at 06:12
I changed the code above to set the
margin to 0, but it didn't change anything.
– Dec 07 '14 at 22:28
Looking at your edit, you've nested the #p rule inside the #SearchBar rule. This is problem #1 I mentioned in my answer; you can't nest rules in CSS. You have to place the #p rule outside of any other rule. If you want the selector to be more specific, i.e. select #p only when it occurs as a descendent of #SearchBar, separate them by whitespace, or by the `>` operator for a parent-child relationship. (Although since ids must be unique in the document, this specificity for a #id style selector isn't really useful.) See http://jsfiddle.net/9mmnp6Lz/2/. – bgoldst Dec 08 '14 at 00:05
I placed #p to be its own rule, but nothing changed. – Dec 08 '14 at 18:59

score -1 · Answer 2 · answered Dec 07 '14 at 06:10

if you are in CSS this is Not Work for Child of Your syntax is for LESS
LESS must export to CSS
and 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/

Elements of a div display outside of said div

2 Answers2