Div inside another broken div

Navigation
4

How to insert a div into another div without any of them breaking the line.

I want to do it this way because I'm developing a clan website and in the index you have to have the login button or the registry, I did that but when I ran the html it did the 2nd div line break. p> 

<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>
    
asked by anonymous 27.11.2015 / 19:30

4 answers

4

You can insert a class to handle in css.

And you can set them to inline as the 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>
    
27.11.2015 / 19:40
4

.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>
    
27.11.2015 / 19:34
4

You can use float: left in the div div's register to avoid 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 the Grid.

    
27.11.2015 / 19:37
1

Each element in HTML has a property display , in the case of <div> display is set to block by default. The block "tells" each element that has it to always start on a new line, in the case of <div> (division) the property lives up to its name. There are other values you can set for display , one of them is 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 if it is visual semantics, it makes more sense to say that a <li> is inline than a <div> .

In this case, I'll leave a tip / 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>
    
27.11.2015 / 20:00
Can I change the vertical order of divs by CSS? How do I get current url in Javascript?