How to fill horizontally in CSS?

Question

I've got the following scenario:

div.container {
    min-width: 500px;
}

div.container div.left {

}

div.container div.right {

}

<div class="container">
    <div class="left">Fill-me</div>
    <div class="right">As-needed-only, align right</div>
</div>

I need the second div to be right-aligned in a row and be only as wide as needed, and left one to fill remaining space on the left. How can I achieve that?

ASCII-art:

[ Fill-me                        ][As-needed-only, align right]

XAML version of what I want to achieve:

<DockPanel>
    <Grid DockPanel.Dock="Right">
        <TextBlock>Right</TextBlock>
    </Grid>
    <Grid> <!-- Will fill rest of space -->
        <TextBlock>Left</TextBlock>
    </Grid>
</DockPanel>

what should happen if the content of the first div is more than a single row? — Fabrizio Calderan, Jul 24 '15 at 11:36
@FabrizioCalderan The container should be expanded to fit everything inside. Edited the example from width to min-width. — Spook, Jul 24 '15 at 11:43
@malcolm In answer you linked to the right div has fixed width. I need it to be variable width, matching its contents. — Spook, Jul 24 '15 at 11:48

Alex Char · Answer 1 · 2015-07-24T11:46:04.557

2

You can use display: table-cell to child div's and display: table to parent:

div > div {
  display: table-cell;
}
div > div:first-child {
  width: 100%;
  background: red;
}
div > div:last-child {
  background: green;
  white-space: nowrap;
}

<div style="width: 500px;display: table;">
  <div>Fill-me</div>
  <div>As-needed-only, align right</div>
</div>

edited Jul 24 '15 at 11:46

answered Jul 24 '15 at 11:36

Alex Char

32,879
9
49
70

2

First (left) column should take all available space. You can make it with: div > div:first-child {width: 100%} div > div:last-child {white-space: nowrap}. – skobaljic Jul 24 '15 at 11:41
@skobaljic True. Thanks for feedback. – Alex Char Jul 24 '15 at 11:46

mercury · Answer 2 · 2015-07-24T11:54:22.987

0

I think it is best acheived easily by FLOATING, You have to float both left and right divs to right , then i prefer that you calculate width by % , like right 30% the other div (left) will take the remaining space i think .. give it a try

If you need the right div to take as much as space it needed , you have to do some calculations around like if you use php or other server side language, you can specify the number of words of the line and upon this determine the width accordingly.

edited Jul 24 '15 at 11:54

answered Jul 24 '15 at 11:46

mercury

2,390
3
30
39

Right div should fill as much width as needed. That not necessairly will be 30%. – Spook Jul 24 '15 at 11:47

How to fill horizontally in CSS?

2 Answers2