CODEWITHSUNDEEP
htmlcssalignment
daisy
daisy

Reputation: 23591

Placing a border under both image and text in HTML , but border was under text when image is too big

I'm trying to place a border after the div tag , but the line showed around the text , not after below the image on left , how can i fix it ?

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>

enter image description here

How can i place the border a little lower ?

Thanks !

Upvotes: 1

Views: 2229

Answers (4)

nowaq
nowaq

Reputation: 2748

I don't understand exactly what you want to achieve here but if you would like to have a div with an img and p below each other then you could just get rid of class="left" in the img and apply float: left to the content class.

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                float: left; /* can get rid of this if you want your div to have the page witdh */
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img src="image.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

You need to clear the current float:

Either:

<br clear="left" />  <!-- or "right" or "all" -->

Or:

<div style="clear: left;"></div> <!-- or "right" or "both" -->

Upvotes: 2

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

In the .content div, replace the clear:both with overflow:hidden

.content {
                overflow: hidden;
                border-color: #666666;
                border-bottom: 3px solid;
            }

Upvotes: 1

Riz
Riz

Reputation: 10246

Use float:left; for all:

  • Image has already left class
  • Div .content should have same i.e; wrapper div
  • paragraph inside content

Upvotes: 0

Related Questions