how to display two div's right side one by one in html

Question

Hi in the below code i want to display like this

Welcome Guest       Free Register   Login
drop down menu
Powered by Translate

the above all the text not displaying right hand side.

But when i am displaying the code my output is like this:

dropdown   Powered by Translate                      Welcome Guest       Free Register   Login

html

<div class="header">
    <div class="container">


        <div class="header-right">

        <p>&nbsp;&nbsp;Welcome Guest&nbsp;&nbsp;
         &nbsp;&nbsp;Free Register
        &nbsp;&nbsp;Login
     </p>
     <div>
     <select>
     <option>Select Language</option>
     <option>English</option>

     </select>
     <p>Powered by Google Translate</p>
      </div>
        </div>

style.css

.logo {
  float: left;
}
.logo a {
  display: block;
}
.header {
  margin: 10px 0;
}
.header-right p {
  float: right;
  width: 42%;
  margin-right: 10px;
}

updated link:

see my site link `olisvell.com/responsivedesign/index.html` language also i want to display right

Peyman Mohamadpour · Accepted Answer · 2015-07-12T12:12:15.287

1

Regarding you last comment (try to edit you question if it changes a bit), you should move your <div id="logo"> from #navigation to .container like this and change some CSS

.container{ direction: ltr }
.header-right, .header-right .right{ float: right }
.header-right span{ margin-left: 20px }
.clear{ clear: both }

    <div class="header">
    <div class="container">
        <div class="header-right">
            <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
            <div class="clear"></div>
            <select class="right">
                <option>Select Language</option>
                <option>English</option>
            </select>
            <div class="clear"></div>
            <p class="right">Powered by Google Translate</p>
            <div class="clear"></div>
        </div>
        <div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""></a>
        </div>
    </div>
</div>

edited Jul 12 '15 at 12:12

answered Jul 12 '15 at 11:00

Peyman Mohamadpour

17,954
24
89
100

how to move select langaue and powerd by also right side – care567 Jul 12 '15 at 11:33
see my site link olisvell.com/responsivedesign/index.html language also i want to display right – care567 Jul 12 '15 at 11:49
see my link logo down – care567 Jul 12 '15 at 12:00
what do u want? logo inline with those stuff? I mean u want ur logo to go up ? – Peyman Mohamadpour Jul 12 '15 at 12:02
logo and text in a same line .yes logo i want to up – care567 Jul 12 '15 at 12:05
both navigation menu and logo i want to move to top – care567 Jul 12 '15 at 12:26
Please consider accepting my answer and try to ask new question. as these situations are not listed in your current question. I will answer other question as they are asked :) – Peyman Mohamadpour Jul 12 '15 at 12:27

Lelio Faieta · Answer 2 · 2015-07-12T10:55:16.247

0

Use a structure like this to get what you want:

<div id="container">
    <div class="floating"></div>
    <div class="floating"></div>
    <br style="clear: both;">
</div>

and in your css:

.floating{
    float: left;
}

That will give you three divs side by side as you requested. Adjust width of container and floating divs to the size you want (sum of floating <= container) and but any content that will follow after the br tag,
.

edited Jul 12 '15 at 10:55

answered Jul 12 '15 at 10:41

Lelio Faieta

6,457
7
40
74

see my site link http://olisvell.com/responsivedesign/index.html language also i want to display right – care567 Jul 12 '15 at 11:49

score 0 · Answer 3 · answered Jul 12 '15 at 10:57

0

Simply remove the floating to the right if you want them to stack. this will render it exactly. https://jsfiddle.net/up5e3d60/

.header-right p {
width: 42%;
margin-right: 10px;
}

answered Jul 12 '15 at 10:57

Msegling

365
3
12

But i want to display the full content in right side because of i was added float right – care567 Jul 12 '15 at 11:17

score 0 · Answer 4 · answered Jul 12 '15 at 11:14

https://jsfiddle.net/zer00ne/bjr44fq6/ Simply float everything left and whatever elements you want side by side display: inline-block; and if you don't want a particular element without any element next to it, use clear: left, right, or both

HTML

    <header class='header'>
    <section class='container'>
        <nav class="header-right">
             <h1>Welcome Guest</h1>  <a href="https://nowhere.togo">Free Register</a>  <a href="https://nowhere.togo">Login</a>

        </nav>
        <select class="lang">
            <option>Select Language</option>
            <option>English</option>
        </select>
        <p class="gtran">Powered by Google Translate</p>
    </section>
</header>

CSS

       .logo {
    float: left;
}
.logo a {
    display: block;
}
.container {
    float: left;
    width: 100%;
}
.header {
    margin: 10px 0;
    float: left;
    width: 100%;
    height: auto;
}
.header-right h1 {
    float: left;
    width: 42%;
    margin-right: 10px;
    display: inline-block;
}
.header-right a {
    display: inline-block;
    float: left;
    margin: 10px;
}
.lang {
    display: block;
    float: letf;
    clear: both;
}
.gtran {
    float: float;
}

how to display two div's right side one by one in html

4 Answers4

HTML

CSS