CODEWITHSUNDEEP
htmlcss
Gonzalo Hernandez
Gonzalo Hernandez

Reputation: 737

CSS Align Text with Select in the same line

I'm trying to align 2 div in the same line in html, but I can't find a way to do it. I tried using

   position:relative;

in the parent and 

position:absolute;

in the childs, but no success, seems to only work with text.

This is the Fiddle

Upvotes: 0

Views: 2391

Answers (6)

SekDinesh
SekDinesh

Reputation: 119

Try this code:

Fiddle Link: Fiddle Link

With responsive layout

    .parent {  
  position: relative;

}
.left{
 border: 1px solid; 

}

.right {
  border: 1px solid;
}

@media screen and (min-width: 47.5em ) {
  .left { margin-right: 19.5em; }

    .right { position: absolute; top: 0; right: 0; width: 18.75em; }   
}

Upvotes: 0

praveen
praveen

Reputation: 1375

Try this... fiddle link Fiddle. You can set Mostrar in span tag

<span>Mostrar:</span>

Upvotes: 0

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

Use display:flex; in you parent class. And remove default margin from p tag.

CSS

 .parent {  
      overflow:hidden;
      background: yellow;
      width:90%;
      display:flex;
      align-items: flex-start;
    }

    p{
      margin:0;
    }

see the demo

Upvotes: 0

Thinh Nguyen
Thinh Nguyen

Reputation: 392

Try using display:inline-block.

.left {
  float: left;
  width: 50%;
  display: inline-block;
}

.right {
  width: 50%;
  display: inline-block;
}

https://jsfiddle.net/thinhn1992/kro2fxz3/

Upvotes: 0

ketan
ketan

Reputation: 19341

Remove margin-right: 50%; and give float: left; to .right 

.right {
    float: left;
    width: 50%;
}

Fiddle

Upvotes: 1

Chris
Chris

Reputation: 59491

Set both div elements to float: left and remove the margin-right from the .right class.

.right {
  float: left;
  width: 50%;
}

The div will now be on the same line, however it may yet not appear so. Remove the default margin for p elements and you're all set.

p {
  margin: 0;
}

Demo

Full code below:

.left{
  float:left;
  width: 50%;
}

.right {
  width: 50%;
  float: left;
}

p {
  margin: 0;
}
<div class="parent">
  <div class="left">
    <span>SOME TEXT</span>
  </div>
  <div class="right">
    <p>Mostrar:&nbsp</p>
    <select>
      <option value="todas">TEXT</option>
      <option value="leidas">TEXT</option>
      <option value="noLeidas">TEXT</option>
    </select>
  </div>
</div>

Upvotes: 2

Related Questions