CODEWITHSUNDEEP
htmlcss
OzzC
OzzC

Reputation: 821

my text is not aligning correctly

I have two <ul> and Im having a problem with my second <ul>, that is the <ul> with more content.

In this second <ul> my last line appears floated at left and dont appears below my penultimate line.

Like this:

enter image description here

Somebody there knows how I can align this correctly?

My jsfiddle with the problem:

http://jsfiddle.net/8UQeF/2/

My html:

 <div id="example">
                    <img src="images/image1.jpg" width="180" height="170" />
                    <h2>1º ul</h2>
                    <ul>
                        <li>Here I have two list items:</li>
                        <li><strong>List item 1:</strong> content of list item 1</li>
                        <li><strong>List Item 2</strong>content of list item 2</li>
                    </ul>
                    <div id="clear"></div>
                     <img  src="images/image2.jpg" width="180" height="170" />
                    <h2>2º ul</h2>
                    <ul>
                        <li>Here I have four list items:</li>
                        <li><strong>List item 1</strong> content of list item 1</li>
                        <li><strong>Penultimate line</strong> This is my penultimate line and works fine but next line wont work fine because exceeds the height of image I guess, but my image needs to have this height</li>
                        <li><strong>This is a litem item with more content then the others and its not working fine </strong> because my last line is not below the penultimate line, somebody there knows how I can solve this situation?</li>
                    </ul>
                </div>

My html:

   <div id="example">
                <img src="images/image1.jpg" width="180" height="170" />
                <h2>1º ul</h2>
                <ul>
                    <li>Here I have two list items:</li>
                    <li><strong>List item 1:</strong> content of list item 1</li>
                    <li><strong>List Item 2</strong>content of list item 2</li>
                </ul>
                <div id="clear"></div>
                 <img  src="images/image2.jpg" width="180" height="170" />
                <h2>2º ul</h2>
                <ul>
                    <li>Here I have four list items:</li>
                    <li><strong>List item 1</strong> content of list item 1</li>
                    <li><strong>Penultimate line</strong> This is my penultimate line and works fine but next line wont work fine because exceeds the height of image I guess, but my image needs to have this height</li>
                    <li><strong>This is a litem item with more content then the others and its not working fine </strong> because my last line is not below the penultimate line, somebody there knows how I can solve this situation?</li>
                </ul>
            </div>

My css:

#example {width:700px; height:auto;  font-size:16px; margin:15px 0 0 0; }
#example img{float:left; margin-right:10px; }
#example h2{color:#444; font-size:18px; }
#example p{ text-align:justify; font-size:16px; margin-top:10px; }
#clear{clear:both; margin-top:30px;}
#example ul {list-style:none;}
#example  ul li {margin-top:5px;}

Upvotes: 1

Views: 51

Answers (4)

Ragnar
Ragnar

Reputation: 4578

Try using this:

#example ul {list-style:none;float:left;margin:0;padding:0;width:60%}

With this solution you can add all text that you want.

Upvotes: 2

MattBoothDev
MattBoothDev

Reputation: 1314

What about this jsFiddle?

I simply added a 

margin-bottom: -15px;

to the h2 element

Upvotes: 0

Ming
Ming

Reputation: 4578

You're after hanging indents, but that's not how elements surrounding floats work.

They technically are all starting at the same left point, however they are being pushed to the right of the floated image. Once the floated image ends, there's nothing stopping the inline text from starting where it's supposed to: at the leftmost point of the block-level container.

You need to set up a box to push the elements away from the floated image:

http://jsfiddle.net/8UQeF/4/

#example .hanging-indent { margin-left: 190px; }

Upvotes: 3

user1843333
user1843333

Reputation:

Don't know if i got the question right, but here goes.

Just add some padding to the bottom of the image.

 <img  src="images/image2.jpg" width="180" height="170" style="padding-bottom:40px;" />

(yeah, maybe not inline, but you get the ideea)

Like this: http://jsfiddle.net/8UQeF/3/

Again, sorry if i misunderstood your question

Upvotes: 1

Related Questions