CODEWITHSUNDEEP
htmlcsslayout
ithil
ithil

Reputation: 1768

Content that flows from center to the sides (with CSS)

I'm working on a layout that has two columns which need to be centered. Each column needs to grow to adapt its width depending on its children content.

The problem for me is that the columns needs to grow from the center to the sides, and all its children need to have the same height and width.

What I need:

Desired layout

As you can see the boxes are all the same height & width. I don't want to manually set those values, I'd like all the boxes to take the size of the longest text inside them (as in 2)

This layout wasn't designed for a website and now I'm kind of stuck trying to make it work like one. I've tried with flexbox reading this and this but it seems it only works with fixed-width children.

I've tried having two columns with display: inline-block and 'text-align: center`: that makes the columns centered but doesn't solve the issue of its children width/height

I know it might be difficult to understand the question but I'd appreciate any ideas or orientation. I was thinking of plain CSS/SASS solution but will listen to javascript alternatives.

Upvotes: 1

Views: 75

Answers (1)

TylerH
TylerH

Reputation: 21069

I happened to be making something similar the other day. I feel like this is a partial answer at best; it solves the layout issue, but I think you would need JavaScript to increase the width of the columns dynamically as you describe. Perhaps someone else can combine this answer with some JS (I don't know JS well enough to answer) to achieve what you're seeking. Do note, however, that the widths here are percentages, so they do grow, in a sense, as you re-size the browser window.

Further, I find your question a little confusing in that you say you don't want to manually specify a height value, but you want the boxes to be the same height. The only way for this to happen is if you have the same amount of content in each box, otherwise your boxes will be different heights (or you must manually specify a height, absolute or relative).

JSFiddle

HTML (with filler text):

<div class="container">
    <div class="left">asdf asdf asdf asdfasdf jkl; jkl; jkl; jkl; asdf</div><div class="right">jkl;<br/>asdf</div>
    <div class="left">asdf asdf asdf asdfasdf jkl; jkl; jkl; jkl; asdf</div><div class="right">jkl;<br/>asdf</div>
</div>

Notice there's no space between the left and right inner divs. If you add a space, then the div will move down to a new line.

CSS:

html, body {
    width: 100%;
    height: 90%;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 12.5% auto;
    position: relative;
}

.left, .right {
    display: inline-block;
    position: absolute;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.left {
    width: 50%;
    background: #aebab1;
}

.right {
    width: 50%;
    left: 50%;
    background: #e2dde1;
}

Upvotes: 1

Related Questions