CODEWITHSUNDEEP
css
chandradot99
chandradot99

Reputation: 3866

How to use width of block with respect to inside content in css

I have a parent div which has two div inside one is image and one is description like below snapshot

enter image description here

The parent div has propertytext-align: center. so its working fine and text image and description is in center.

the description div has a propertymax-width: 580px. so if the description text increases, the image will slightly move to the left as below snapshot enter image description here

And it looks good. But when there is some long word which does not fit in the current line it uses the whole 580px width and long word goes into the next line, like below

enter image description here

since the whole description width is used so the image shifts to the left by using the parent property text-align: center.

but it does not looks good since its in the center by css logic but not by looks.

Is there a way to take the whole width only when there is some content.

I have used property display: table-caption and now it takes only the text width enter image description here

and its in the center of the parent div.

but then it splits the Assistant Manager into two line like below which i dont want

enter image description here

Is there a way to implement the above task by some css property, or i have to use javascript to implement the above task.

Upvotes: 0

Views: 62

Answers (2)

Seika85
Seika85

Reputation: 2021

Since you did not provide us with any code, I only could guess.

This is what I came up with: https://jsfiddle.net/9888d4tf/1/

HTML

<div class="headline-wrapper">
    <img class="headline-image" src="http://kcdn.at/company/84085/1073352/logo-fairmoney-clever-consulting-gmbh.companybig.gif">
    <p class="headline-title">
        <span>
            Assistant&nbsp;Manager someveryverylonglongtexttext
        </span>
    </p>
</div>

<br/><br/>

<div class="headline-wrapper">
    <img class="headline-image" src="http://kcdn.at/company/84085/1073352/logo-fairmoney-clever-consulting-gmbh.companybig.gif">
    <p class="headline-title">
        <span>
            Assistant&nbsp;Manager
        </span>
    </p>
</div>

CSS

.headline-wrapper {
    background: #fff;
    text-align: center;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.headline-wrapper > .headline-image {
    width: 298px;
    height: 92px;
    align-self: center;
}
.headline-wrapper > .headline-title {
    font: 30px/1.1 Verdana;
    display: inline-block;
    text-align: left;
}
.headline-wrapper > .headline-title > span {
    display: table-caption;
}

Result result of https://jsfiddle.net/9888d4tf/1/

The key is, that you previously need to know which words you don't want to wrap. You then either wrap them in a white-space:nowrap span or replace the spaces in between with &nbsp;as I did.

Upvotes: 1

Ismail G&#252;l
Ismail G&#252;l

Reputation: 149

You can set relative width for description div with percentage(like width: 50%). I think it would look good based on your images.

Upvotes: 0

Related Questions