CODEWITHSUNDEEP
htmlcss
Ajax jQuery
Ajax jQuery

Reputation: 345

Having P tags not push other classes

I'm sure I worded this question very poorly, but here's my issue:

I'm creating a long list of rugs, and each rug has a Picture, Title, Size, Original Price and Clearance Price. I've set each rug in its own class and have repeated like so for the rest of the rugs. Here's what the class currently looks like:

<div class="fLeft">
<img src="rug_index_package/rugs/O_5.jpg"/>
<p>Tabriz Wool and Silk</p>
<p>11.8m up to 20m</p>
<br>
<p>Original Price: $00.00</p>
<span>Clearance Price: $00.00</span>
    </div>

And the CSS for this class:

.fLeft{
  padding: 26px;
  float: left;
  line-height: 7px;

}
.fLeft img{
  width: 150px;
  height: 150px
}

If you take a look at the website(Website), you'll see that the second row looks like its pushed a little out compared to the rest of the rows, this is because the title for the first rug on this row is "Persian Tabriz Wool and Silk", which is too long and pushing the row. Obviously It's not too long but its still being pushed.

How can I get around this?

Upvotes: 0

Views: 42

Answers (2)

Andrew
Andrew

Reputation: 20091

You would probably want to set a specific width for your .fleft divs.

Such as width: 200px;

Or since you are using 3 column approach: width: 33%;

Otherwise they will all just automatically re-size to fit the content...

And once you've set a max width, if you want the text to overflow rather than wrap to the next line, you could use overflow: visible; either on the div or just on the description.

Upvotes: 1

StanGaming 666
StanGaming 666

Reputation: 101

.fLeft {
    padding: 26px;
    float: left;
    line-height: 7px;
    width: 25%;
}

That's an easy work around :)

Upvotes: 0

Related Questions