CODEWITHSUNDEEP
htmlcssoverflow
Chris Levine
Chris Levine

Reputation: 273

Floating text side by side using overflow auto

I am trying to get a paragraph to display to the right of another paragraph, however it is currently appearing below it. I am trying to use overflow auto but am unsure of where it is supposed to go.

Example

<div style="padding-left: 5px; padding-right: 5px; float: left;">
    <p style="width: 400px; border-right: 2px solid black;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="padding-left: 5px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>

Upvotes: 1

Views: 69

Answers (5)

jarrad
jarrad

Reputation: 3292

Another option that does NOT need a width on the second p tag:

<div style="padding-left: 5px; padding-right: 5px;position:relative; ">
    <p style="width: 400px; border-right: 2px solid black;display: inline-block;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="padding-left: 5px;display: inline-block;position:absolute;top:0px;right:0px;margin-left:410px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>

Upvotes: 0

Tom Halladay
Tom Halladay

Reputation: 5761

An overflow: auto belongs on the parent div, and you need a width on both floated elements. Try this:

<div style="padding-left: 5px; padding-right: 5px; overflow: auto;">
    <p style="float: left; width: 400px; border-right: 2px solid black;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="float: left; width: 400px; padding-left: 5px;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>​

Fiddle

Upvotes: 1

mgraph
mgraph

Reputation: 15338

demo : http://jsfiddle.net/rn8k3/

<div style="padding-left: 5px; padding-right: 5px; float: left;">
    <p style="width: 48%; border-right: 2px solid black;float:left;">
        Lorem ipsum dolor sit amet, dui purus nascetur ultrices commodo at morbi, eget nulla.
        Ipsum donec amet, facilisis pellentesque lacinia vel quis lacus leo, mollis sit
        lacinia eros dui in, nullam fermentum sollicitudin viverra. Proin cum. Vel ipsum
    </p>
    <p style="width:48%;padding-left: 5px;float:left;">
        Lorem ipsum dolor sit amet, et felis, viverra at ullamcorper interdum, suspendisse
        ipsum dolor sint, lacinia nec vestibulum dolor per rutrum, lacus consequat. Architecto
        ultricies ut pellentesque sapien eget sed. Mauris justo nonummy euismod consectetuer
        pellentesque. Etiam metus vestibulum lacinia eget vitae amet, volutpat sem integer
    </p>
</div>​

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You need to set both a width and float:left for both paragraphs. You do not need float:left on the wrapping DIV.

<p style="width: 400px; border-right: 2px solid black; float:left;">

Upvotes: 0

hovmand
hovmand

Reputation: 130

You need a width on the second paragraph and I also think they also need to float.

Upvotes: 0

Related Questions