0

I'm trying to do a simple page with two divs inside a large div which I'm using as a container for the whole page. For being able to do this I'm using the display: inline for the divs, but when I do this everything just wrecks itself.

div {
    margin: auto;
    border: 2px solid black;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
#container {
    width: 95%;
    min-height: 620px;
}
#options, #forms {
    display: inline;
}
h1 {
    text-align: center;
}
<body>
    <div id="container">
        <h1>BANCO DE LA NACION</h1>
        <hr>
        <div id="options">
            <h3>Eliga su operación:</h3>
            <input type="button" name="crear" id="creacion" value="Crear nueva cuenta">
            <input type="button" name="mostrar" id="mostrador" value="Mostrar datos">
        </div>
        <div id="forms">
        </div>
    </div>
</body>

I'm wondering if there is another way of making divs spawn right to each other (without the usage of bootstrap which for the moment I'm trying to avoid) or in the case the way I'm doing it is the correct one, which is my mistake?

Yacomini
  • 157
  • 1
  • 13

2 Answers2

2

Use inline-block instead of inline. Read difference between them in:

What is the difference between display: inline and display: inline-block?

CSS display: inline vs inline-block

Community
  • 1
  • 1
Ali Mottaghi Pour
  • 297
  • 3
  • 19
  • Thank you very much! This actually helped a lot. – Yacomini Aug 11 '16 at 13:58
  • I had a new issue but it was a sintax error! Sorry for that, you answer was indeed correct – Yacomini Aug 11 '16 at 14:13
  • @Yacomini dear friend please: 1 ) set a id for main div and style it by id. 2 ) create a new queastion for any new question. Tanks. – Ali Mottaghi Pour Aug 11 '16 at 14:20
  • I'm pretty new to all this, thanks for all the tips. I primary use div when styiling because almost everytime I use those values in every div generally and if I need to change them I specify by changing the values in the different div, is that not the recommended way to go? – Yacomini Aug 11 '16 at 14:30
  • 1
    @Yacomini I can not explain very good because my English is not good. if you "almost everytime I use those values in every div generally" that is good but in a real design you have many div and i think this styles can not be general. – Ali Mottaghi Pour Aug 11 '16 at 14:35
1

Change inline to inline-block.

RussAwesome
  • 464
  • 5
  • 18
  • * An inline element has no line break before or after it, and it tolerates HTML elements next to it. * A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. * An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. – RussAwesome Aug 11 '16 at 13:52