CODEWITHSUNDEEP
htmlcss
AllramEst
AllramEst

Reputation: 1449

How to align two div next to each other

I want two divs next to each other . one contains a button the other some text. i would like the text before the button with som margin. But the keep ending up on the wrong side. My code:

.helpButton {
        display: inline-block;  
        float: right;
    }

    .helpText {
        margin-right: 5em;
        float: right;
        display: inline-block;
    }

    .help-block {

        display: inline-block;  
        overflow: auto;
        float: right;
    }
<div class="help-block">
                <div class="helpText">@Resource.FooterHelp</div>
                <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">@Resource.FooterHelpLink</button>
            </div>

I know there are similar questions like this here on this forum, but cant get theme to work for me

Thank you all for all your suggestions!

Upvotes: 1

Views: 9268

Answers (7)

Miro
Miro

Reputation: 8650

Change the <div> to <span> and you'll save on lots of CSS:

.helpText {
  margin-right: 10px;
}

.help-block {
  overflow: auto;
  float: right;
}
<div class="help-block">
  <span class="helpText">Some text</span>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

I would use a flexbox and avoid floats. This way, all elements will follow the document flow (and you need less CSS code).

.helpText {
  margin-right: 5em;
}

.help-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
<div class="help-block">
  <div class="helpText">@Resource.FooterHelp</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">@Resource.FooterHelpLink</button>
</div>

Upvotes: 1

Fernando Paredes Murillo
Fernando Paredes Murillo

Reputation: 167

Dont' use floats (right floats reverses therorder of the elements). As you are using display: inline-block, a simple tex-align will work

.help-block {

    display: inline-block;  
    text-align: right
}

.helpButton {
    display: inline-block;
}

.helpText {
    display: inline-block;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>

Upvotes: 3

Hash
Hash

Reputation: 8020

You could use inline-flex,

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-flex;
  float: right;
}


.help-block {
  display: inline-flex;
  overflow: auto;
  float: right;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>

Upvotes: 0

DBtalwar
DBtalwar

Reputation: 1

.helpButton {
  float: left;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
 
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>

Upvotes: -2

kevin b.
kevin b.

Reputation: 1534

Changing the display of the container element, which is .help-block in your case, from inline-block to flex will do the trick. At least, if this is what you are trying to achieve?

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}


.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>

Upvotes: 0

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Try this code.

Logically you need to put button element before the text element because for both we are using float:right. So first it will put text in right and then button.So avoid this thing we just need to exchange the element sequence. No need to do any changes in css.

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  float: right;
}
<div class="help-block">
		   <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
  <div class="helpText">Some text</div>
  
</div>

Upvotes: 0

Related Questions