Div inside another broken div

Question

How to insert a div into another div without either of them making the line break.

I want to do it this way because I’m in the development of a Clan website and the index has to have the login or registration button, I did it but when I went to run the html it broke the line of the 2nd div.

<div id="menubarwidget">
  <div id="register"><a href="?action=register">Registro</a></div>
  <div id="login"><a href="?action=login">Entrar</a></div>
  <!-- E se for o caso do $_COOKIE retornar um usuário já logado -->
  <div id="loggedin" style="display: <?php echo $logged_display; ?>"><span id="username"><?php echo $logged_in_user; ?></span></div>
  </div>

Answer 1

You can insert a class to manipulate in css.

And you can define that they’re right inline, as an example:

.menu
{
  display: inline;
}

<div id="menubarwidget">
  <div class="menu" id="register"><a href="?action=register">Registro</a></div>
  <div class="menu" id="login"><a href="?action=login">Entrar</a></div>
  <!-- E se for o caso do $_COOKIE retornar um usuário já logado -->
  <div id="loggedin" style="display: <?php echo $logged_display; ?>"><span id="username"><?php echo $logged_in_user; ?></span></div>
  </div>

Answer 2

.row {
	display: table;
	width: auto;
	border-spacing: 5px; /*cellspacing:poor IE support for  this*/
	margin: 20px auto 0 auto;
}

.form-group-col {
	float: left; /*fix for  buggy browsers*/
	display: table-column;
	margin: 0;
	width: auto;
	display: table-column-group;
	
}

<div class="row">
  <div class="form-group-col">
    Texto 01
  </div>
  <div class="form-group-col">
    Texto 02
  </div>
</div>

Answer 3

You can use the float:left in the div CSS to prevent this.

#register { float:left; }

<div id="menubarwidget">
  <div id="register"><a href="?action=register">Registro</a></div>
  <div id="login"><a href="?action=login">Entrar</a></div>
 </div>

More elaborately you can do as Mayllon Baumer said or even use a CSS framework to take care of Grid.

Answer 4

Each element in HTML has a property display, in the case of <div> the display is defined as block by default. The block "says" to each element that owns it to always start on a new line, in the case of the <div>(division) the property lives up to its name.
There are other values you can set for display, one of them is the inline. See more about the property display here

In your case, because it is a menu, it makes more sense, instead of encapsulating the links in a <div>, put inside a menu structure, suitable for this. The menu (<ul>) has its items (<li>). The <li> by default, also have the value block, but when it comes to visual semantics, it makes more sense to say that a <li> is inline than a <div>.

In this case, I’ll leave a hint/example of how I could do this:

#menuBarWidget li {
    display: inline;
}

<div id="menuBarWidget">
    <ul>
        <li id="register">
            <a href="?action=register">Registro</a>
        </li>
        <li id="login">
            <a href="?action=login">Entrar</a>
        </li>
    </ul>
    <div id="loggedin" style="display: <?php echo $logged_display; ?>">
        <span id="username"><?php echo $logged_in_user; ?></span>
    </div>
</div>