3

I need top header with two divs inline – left and right aligned. Please review code. Is this correct? Where do I need to add div class="clearfix"

<div class="container">
<div class="columns">
       <div id="div-left">
          Left aligned text
        </div>

        <div id="div-right">
          Right aligned text
        </div>
    </div>
</div>

#div-left {
  float:left;
  display:inline
}

#div-right {
  float:right;
  display:inline
}

1 Answer 1

7

Wrap two divs in a containing div, and give the inner divs float:left and float:right, and perhaps some width if you wish :)

<div>
  <div style="float:right">To the right</div>
  <div style="float:left">To the left</div>
</div>
4
  • No. That is not necessary. You will see that this works if you try it.
    – Maritim
    Dec 13, 2013 at 23:10
  • And can I use it without width:50%? I have responsive design - so they have to shrink in mobile view. Dec 13, 2013 at 23:49
  • Thanks Maritim for your fast reply. I appreciate it. It seems that this code works. How can I set different font size for text in these divs from the rest of body – in CSS? Dec 14, 2013 at 9:30
  • You're most welcome :) Font can be set with for instance font-family:Tahoma in the style-attribute. Although I do recommend putting all CSS rules in a separate stylesheet.
    – Maritim
    Dec 16, 2013 at 7:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.