Two divs refuse to be on the same line

Question

I have a HTML file containing an image, underneath this image I want to display two divs on the same line like this:

text1                       text2

But no matter how I try it, it turns out looking like this:

text1
text2

This is quite annoying.

 <div id="footer">  
                {% block footer %}      
                    <div class="footercontent">                 
                        <div class="left">&copy; blahblahblah </div>

                        <div class="right">
                            <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
                            |   
                            <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
                        </div>  
                    </div>              
                 {% endblock %}
            </div>

I want the two inner divs to dwell on the same line and to display this way on all modern browsers. To do this I have set a css file as such:

#footer                 { margin:auto;   width:720px; }
#footer a               {   color:#333;         }   
#footer a:visited       {   color:#333;         }
#footer .left           {   float:left;         }   
#footer .right          {   float:right; }

Am I missing something obvious here? I though float was meant to solve this issue.

EDIT: It seems to appear correctly in Chrome

Yes, the `width`. If they are both 100% wide they cannot be in the same line, even if floated. Make them 50% like `#footer .left, #footer .right: 50%`. For seeing where each div a small trick I do is to give each a different background to know where they are actually (: — Francisco Presencia, Dec 07 '15 at 17:59
Or much better, use a browser with decent developer tools (Ctrl+Shift+I) in Mozilla or Chrome. — Jim Garrison, Dec 07 '15 at 18:02
Apologies, I was messing with the HTML earlier and forgot to add it back in. — GreenGodot, Dec 07 '15 at 18:03
This seems to work fine in Firefox 31 and Chrome 39..... what browser are you using specifically? — abluejelly, Dec 07 '15 at 18:16
Does the template variable ` {% block footer %} ` add any additional HTML/CSS to the layout? — Marc Audet, Dec 07 '15 at 18:28
Francisco, it turns out your answer solved the issue and now it displays correctly for all browsers. If you add yours as an answer, I will gladly mark it as correct. — GreenGodot, Dec 08 '15 at 16:02

Marc Audet · Answer 1 · 2015-12-07T18:25:55.730

Your code, as posted, actually works as shown below.

If you use float: right, the second child block will have its right edge aligned to the right of the containing block.

If you want the second block to be towards the left, use float: left as shown in the second example, and add a left margin if you need to control spacing between the two elements.

If you still have problems, there may be some other CSS rules that are causing a conflict.

.footer {
  margin: auto;
  width: 400px; /* for demo only, exact value not relevant */
  border: 1px dotted blue;
  overflow: auto;
}
.footer a {
  color: #333;
}
.footer a:visited {
  color: #333;
}
.footer .left {
  float: left;
  border: 1px dotted gray;
}
.footer .right {
  float: right;
  border: 1px dotted gray;
}
.left.space {
  margin-left:30px;
}

<h2>First layout...</h2>
<div class="footer">
  <div class="footercontent">
    <div class="left">&copy; blahblahblah</div>

    <div class="right">
      <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
      |
      <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
    </div>
  </div>
</div>
<h2>Second layout...</h2>
 <div class="footer">
  <div class="footercontent">
    <div class="left">&copy; blahblahblah</div>

    <div class="left space">
      <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
      |
      <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Dec 07 '15 at 18:10

0

I think you need to set display property of anchor tag like

#footer a {
color:#333; 
display:inline-block
}

answered Dec 07 '15 at 18:10

Manish Shukla

1,355
2
8
21

Two divs refuse to be on the same line

2 Answers2

Linked