How to Float Two Boxes of Text Next to Each Other

Hi there!

Here’s a brief tutorial about getting two pieces of text to float next to each other. The easiest way to do this, I found, was using the {max-width} and {float} declarations in CSS.

Before using those two declarations on my two main bodies of text my website looked like this:



…Not so pretty, and so large that it requires two screenshots to show it off!

In order to amend this problem it’s imperative to control the max-width of each body of text. The declaration is {max-width:77%;} With the number varying depending on what exactly you’re trying to do, and if you have specific boarders, margins, etc. 


From there you’ll be able to play around a bit and find the appropriate widths for both of the bodies of text. I ended up using 77% and 20%, respectively from left to right.

Once you’re happy with the widths of both bodies of text you should add the float declaration to bring the pieces next to each other. You’ll use the declaration {float:left;} or {float:right;} respectively, depending on where you would like the specific text body to float. Check out the CSS here:


**Remember to use the float declaration the CSS for each body of text!**

That’s it. From there you should have your two bodies of text floating next to each other! 



– Julia Eisler

~ by juliaeisler on February 22, 2014.

2 Responses to “How to Float Two Boxes of Text Next to Each Other”

  1. You have the best voice, in my opinion, because you sound friendly but well informed on your topic. Your tone is conversational, as highlighted by when you said, “…Not so pretty, and so large that it requires two screenshots to show it off!”

    I would also say that your post has the best format and is composed very well, as it is well organized, well spaced out, and the pictures are formatted and displayed correctly.

  2. I really liked this blog post! I think you did a great job using a casual but effective voice that flowed clearly. I especially liked that you gave a brief statement at the beginning on what the tutorial is about.

Comments are closed.

%d bloggers like this: