CODEWITHSUNDEEP
htmlcsslayout
sawa
sawa

Reputation: 168101

How to avoid line break when one of the child has `width:100%` style

I want to horizontally align div elements within a container div element avoiding line break between the child elements.

But, when one of the child div element has width:100% style as in the following:

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:inline-block;background-color:yellow;">1</div>
  <div style="display:inline-block;background-color:green;width:100%;">2</div>
  <div style="display:inline-block;background-color:yellow;">3</div>
</div>

that element is placed by itself on a new line like this:

actual

How can I avoid line breaks under any circumstances? When the sum of the child elements' width is greater than that of the parent's width, I want that part of the element to be cut off (hidden). I tried it using overflow-x:hidden as above, but it did not work.

Upvotes: 3

Views: 1140

Answers (3)

jamesplease
jamesplease

Reputation: 12869

Do you mean that you want all of the elements to push outside the parent when their sum is greater than the parent? If so, try adding this to the parent:

{ white-space:nowrap; }

View on JSFiddle

This works because the children are set to be inline-block elements, so they're treated like text. Chris Coyier has a good explanation (with pretty diagrams) of all things white-space here, which you might find interesting.

Upvotes: 3

Jeffrey Nicholson Carr&#233;
Jeffrey Nicholson Carr&#233;

Reputation: 3040

You can try this instead of inline-block use table-cell:

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:table-cell;background-color:yellow;">1</div>
  <div style="display:table-cell;background-color:green;">2</div>
  <div style="display:table-cell;background-color:yellow;">3</div>
</div>

result: enter image description here full display property list

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

One way to do it is to use another DIv but use px widths rather than percentage as using 100% as a width is NEVER going to work afaik.

<div style="float:left;overflow:hidden;background-color:blue;width:300px;">
    <div style="width:3000px; overflow:auto;">

        <div style="display:inline-block;background-color:yellow;width:100px">1</div>
        <div style="display:inline-block;background-color:green;width:300px;">2</div>
        <div style="display:inline-block;background-color:yellow;width:100px;">3</div>

    </div>
</div>

Upvotes: 0

Related Questions