CODEWITHSUNDEEP
csshtml
user1137313
user1137313

Reputation: 2410

CSS DIV word-wrap issue

I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV. You can see my problem in jsfiddle. Can you please help me solve this? I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it. Basically I want to text to look normal inside the DIV.

<div class="container-right">
    <div class="topul" style="background-color:#2ecc71; width:352px;"></div>
    <div class="parent" style="min-width:350px; width:350px; height:445px;">
        <p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>

        </p>
        <div class="topul2" style="float:left; background-color:#2ecc71;"></div>
        <div class="d-table">
            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71">Name:
                        <p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71"><b>Some name</b>
                    </p>
                </div>
            </div>
            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71;">Address:</p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
                    </p>
                </div>
            </div>

            <div class="d-tablerow">
                <div class="d-tablecell" style="text-align:right; width:30%">
                    <p class="myp3" style="color:#2ecc71">Other info:</p>
                </div>
                <div class="d-tablecell" style="text-align:left; width:70%;">
                    <p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
                    </p>
                </div>
            </div>


        </div>
    </div>
</div>

You can see the CSS in the jsfiddle link above. I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this. Please help. Thanks

Upvotes: 0

Views: 244

Answers (3)

A BOY n HIS PIG
A BOY n HIS PIG

Reputation: 23

The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table { width: 350px; }

Upvotes: 1

Angry Goomba
Angry Goomba

Reputation: 470

The problem is with your .myp4 styles

To avoid the overlap remove height: 2px;

To avoid bleeding from the div set max-width: 200px;

As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height

NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.

Upvotes: 3

jameslafferty
jameslafferty

Reputation: 2182

Try setting min-height instead of height on the rows and/or cells.

Upvotes: 1

Related Questions