Align Divs Left And Right Next To Each Other

I'm not sure if i'm doing this right. Trying to align divs left and right on same line, But when i resize window the right div drops down and stays to the right. How would i re ali

Solution 1:

I recommend using media queries for this. The logic is pretty simple. First, set the CSS rules for small screens. Then use a media query to apply new CSS rules for whenever the window is wider than a certain width.

.text-center {
  text-align: center!important;
}    
.text-left, .text-right {
  text-align: left!important;
}    
.left, .right {
  display: block;
}    
@media all and (min-width: 400px) {
  .left {
    float: left!important
  }
  .right {
    float: right!important
  }
  .text-right {
    text-align: right!important;
  }
}

Solution 2:

I don't understand how you want to display when you resize the window am assuming you want to display next to the first div so for that just .right css alone.

.right {
    float: left
}

Solution 3:

Add display: inline-block; to your .left and .right divs. Also, to get these divs always at left and right aligned even on small screen sizes, add max-width: 49%; in both.

Hope this helps

Solution 4:

To make both divs on one line even when the window is smaller, just use following style and nothing else:

  <style>

div{
        float: left;
        width: 45%;
        padding: 2%;
    }
</style>

Solution 5:

wrap the info in another Div container(WrapperContainer) with set values like this.

<div class="WrapperContainer">
<div class="row">
<div class="col-md-6">
<h2>Infomation:</h2>
<p>
Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a  href="mailto:contact@email.com ">contact@email.com<br/></a>
</p>
</div>
<div class="col-md-6">
<h2>Business Hours:</h2>
<p>
Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
</p>
</div>
</div>
</div>

Then the style. Customize the with and height to fit your needs. if your resolution changes the container box will not so the results are stationary.

.WrapperContainer{
Width:800px;
height:300px;
float: left;
}