CODEWITHSUNDEEP
htmlcss
Michelle Dimwaite
Michelle Dimwaite

Reputation: 115

How to Adjust divs and links under each other

2 of them should be on the same line and the next div should fall just below them, while both 3 divs centered in the middle of the wrapper. I am targeting a register and login then a search box below both of them my html is

<div id="wrapper">
     <div id="reglog>
         <a href="#">Register</a>
         <a href="#">Login</a>          
      </div>
      <div id="search">Quick Search</div>
</div> <!--End of wrapper-->.

my css is 

   #wrapper{
            float:right;
            max-width:380px;
            text-align:center             
           }

    #reglog{
            display:inline-block
            }

I was hoping that not giving any style to id=search, it will just fall below the reglog block... Any help on why I cant get this to work?

Thanks Michelle

Upvotes: 0

Views: 91

Answers (2)

user4864380
user4864380

Reputation:

I recommend to use display:flex; and specify the flex direction you want using flex-direction: row | row-reverse | column | column-reverse;

Also you should attach these CSS properties to a <div></div> which contain all of your three divs.

You can find all information about this here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Super User
Super User

Reputation: 9642

Just use display:block; instead of inline-block. Check updated snippet below..

#wrapper{
  float:right;
  max-width:380px;
  text-align:center             
}
#reglog, #search{
  display:block;
}
<div id="wrapper">
     <div id="reglog>
         <a href="#">Register</a>
         <a href="#">Login</a>          
      </div>
      <div id="search">Quick Search</div>
</div> <!--End of wrapper-->.

Upvotes: 1

Related Questions