Allow float element to overflow horizontally

Question

I have the following structure:

<div id="hold">
    <div id="hold-left">content</div>
    <div id="hold-right">content</div>
</div>

hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.

This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.

How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?

I find it hard to visualize what you are trying to do, but it sounds like you're just looking for `position:absolute`. — Niels Keurentjes, Jan 16 '16 at 12:02

score 1 · Accepted Answer · answered Jan 16 '16 at 12:00

1

Have you considered using a left margin on .hold-right?

.hold-left{
  float:left;
  width:40%;
}
.hold-right{
  margin-left:45%;
}

Also, generally you should use classes, not IDs.

answered Jan 16 '16 at 12:00

rybo111

12,240
4
61
70

@Aprillion Classes are re-usable. Using IDs in CSS is (or should be) rare. – rybo111 Jan 16 '16 at 12:22
just because you have an opinion doesn't mean it must be general. both classes and ids have their place, e.g. notice the `#12889421` part of a direct link to an answer that talks about this topic http://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it/12889421#12889421 – Aprillion Jan 17 '16 at 14:33
@Aprillion it's not an opinio. Look up the word 'generally' - classes appear more than IDs. This two-column style is likely to be reused. – rybo111 Jan 17 '16 at 18:00

score 0 · Answer 2 · answered Jan 16 '16 at 11:53

0

You can try with display: table, and table-cell. The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.

Otherwise, you will need to use javascript to update both cells.

answered Jan 16 '16 at 11:53

lucian.nicolaescu

647
3
9

score 0 · Answer 3 · answered Jan 16 '16 at 12:06

Use position property in css. Checkout this

position: relative; in the parent.
position: absolute; in the each child.

#hold {
  position: relative;
}

#hold-left {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
}

#hold-right {
  position: absolute;
  right: 0;
  width: 100px;
  height: 200px;
  background: yellow;
}

#zoomLevelSelector {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

Allow float element to overflow horizontally

3 Answers3