5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Text layout advice?

by DavidO
4 replies
  • WEB DESIGN
    • |
I'm trying to set a maximum p width of 520px within a 700px content div. I'm doing this because I'm floating images down the right side at intervals and I want the text to wrap fluidly.

The text is left aligned, images to the right, and I'd like to keep it all in one div.

It ain't workin!

By setting p width it stays static at that width in all circumstances. So if I have an image on the left the text will jut out to the right. It also does other weird things.

I've also tried max-width to no avail.

I can do it by alternating div's of different widths but it gets real fussy and it lacks the fluidity I'm after.

Is there a simple way to achieve this?

Thanks for any tips!
#advice #layout #text
  • Profile picture of the author layouts4you
    the way i would achieve this would be to use divs with absolute positioning. you would be able to control the widths and put them exactly where you want. you will have to start with a main div and put your other divs inside them. if you would like to pm me contact info id be happy to work with you to achieve this.

    here is a basic example of the main div and 2 divs 1 for content and 1 for your images.

    by no means is this perfect but hopefully it will guide you in the right direction.

    Code:
    <style>
.main {
    position: relative;
    width: 700px;
    height: 500px;
}

.1st {
    position: absolute;
    width: 520px;
    height: 300px;

}

.2nd {
    position: absolute;
    width: 180px;
    height: 500px;
    right: 0px;
}
</style>

<div class="main">

<div class="1st">
1st div
</div>

<div class="2nd">
2nd div
</div>
</div>
    {{ DiscussionBoard.errors[2317394].message }}
  • Profile picture of the author Amsterdam
    I'm not completely sure what you're trying to do but if you want the text to flow around the images then you should float them.

    You can create classes for left and right, for example:-

    Code:
    .left{
float: left;
margin-right: 20px;
}

.right{
float: right;
margin-left: 20px;
}
    I hope this helps.

    T
    {{ DiscussionBoard.errors[2317445].message }}
  • Profile picture of the author DavidO
    I don't think I explained very well what I'm trying to achieve. So here's a test page:

    Lower blood pressure naturally

    The total content area is 700px wide. I want to float the graphics (testimonials and quotes) to the right. That's easy.

    But I want to maintain a short text content of just 520px and make it wrap fluidly where it meets the graphics.

    I'm currently using two content divs, one at 700px and the other at 520px. When I come to a graphic I apply the 700px div and float the object to the right. Using margins I can get the text to wrap where I want it.

    Then at the end of the graphic I revert to the 520px div.

    This works but it's problematic. It's too fussy and if someone adjusts the text size it could throw off the layout.

    I've tried setting p width to 520px but that doesn't work.

    Is there a way to overlap two divs, one aligned left and one aligned right, and make the text wrap where it encounters an object?

    I'm sure there's a more elegant way to do this. Thanks for any tips!
    {{ DiscussionBoard.errors[2320598].message }}
  • Profile picture of the author DavidO
    I think I've found a solution: I've put all the content in a single div of 580px width. Then I float the image to the right and give it a negative margin to make it intrude into the white space.

    This seems to work fine in both IE and Firefox.
    {{ DiscussionBoard.errors[2320829].message }}

Trending Topics