-1

Given two blobs of HTML (explicitly without saying what they are) how do I make them layout next to each other?

I've seen lots of questions that place more restrictions on it: "they are div elements", "use CSS", "they need to float", "they should be the same width" or "have some ratio". All I want is to place them next to each other. If the screen is wide enough, they should have no effect on each other's internal layout. I want it to look the same as if you took screen shots of each as it's own page and pasted them together. If the screen's not wide enough, it should do something reasonable, which can include require side scrolling. And I'm looking for an answer that's reasonably correct regardless of what the blobs are. I've no particular opinion on CSS so I don't care if it's used or not as long as it's robust and not in the least finicky.

An ideal solution would consist of three strings that can be concatenated with the blobs and expected to work:

concat(Head, blob1, Mid, blob2, Tail)

bonus points if it can be extended to more blobs:

concat(Head, blob1, Mid, blob2, Mid, blob3, Tail)

EDIT: The motivating case is: Somewhere in a page I need to places two things side by said. I have no control over what comes before or after and I know very little about the things (other than that they are syntactically complete). Whatever I do may be done multiple places in the page or even inside one of the things I've been give, and I won't know about it. I may make no assumptions or requirements other than the use of a reasonably modern browser.

In short, any answer that use the word "if", likely isn't what I'm looking for.

BCS
  • 75,627
  • 68
  • 187
  • 294
  • you need to put some fidde demo. And I think you can do this by giving all divs same min-width and and float. or by jquery. – Ganesh Yadav Aug 26 '15 at 02:47
  • I'm explicitly trying to not give examples because that would encourage answers the only work under restricted cases and that's exactly what I don't want. jQuery is out because it requires assuming something about the global context. – BCS Aug 26 '15 at 04:25

3 Answers3

1

Use display:inline-block to place items next to each other.

<div style="display:inline-block">First item.</div>
<div style="display:inline-block">Second item.</div>

Some people use floating to achieve the desired effect. However, floating is not really intended for page layout and require that the floats are cleared. Using the display property with the block, IMO, is a much better choice for layout.

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Community
  • 1
  • 1
Dan
  • 101
  • 9
  • That sort of gives me what I want, but the content falls to the bottom of the div elements: http://jsfiddle.net/xvopkwjv/2/ I.e. the seconds blob unnecessarily alters the layout of the first. – BCS Aug 26 '15 at 04:34
0

Do you mean something like this? http://codepen.io/anon/pen/oXKmaX

Html

<div id="left"></div>
<div id="right"></div>

CSS

#left{
  background-color: rgb(0,0,0);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 200px;
}
#right{
  background-color: rgb(137,123,10);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 800px;
}
Crinkley Crewms
  • 123
  • 11
  • That assume injecting CSS elsewhere is possible. And that I can find an ID that nothing else will ever try to use. I'm really looking some something that's 100% self contained. – BCS Aug 26 '15 at 04:17
  • Also, that's explicitly setting positions. – BCS Aug 26 '15 at 04:35
-1

Really the only html/css solution is to have two divs floated left and width at 50%. Place content into those. If you are trying to put two separate sites side by side use iFrame instead of div.

<div style="float:left; width:50%">left content</div>
<div style="float:left; width:50%">right content</div>

Html layouts are dependent on the size of the parent window so you must put some constraint on the containers in which you are displaying the content, which is why you keep seeing the restrictions you are referring to.

dinomix
  • 956
  • 4
  • 5
  • Unless you go out of your way to cause it, nothing lays out as infinite width. As long as the "width it takes once the screen is sufficiently wide" for the two bits is, in total not more than the full width of the screen, I want them both to (internally) lay out as if they were the only thing there. --- And 50% doesn't work at all if the things would naturally only take up say 5%. – BCS Aug 26 '15 at 04:21
  • So the 50% would be the max width, if they were naturally to take up 5% then they would take up 5% of the 50%. If you want to make it wider you can do position: absolute and then set the top, bottom, left and right properties of each div to make it whatever size you want and position them wherever you want on the screen. – dinomix Aug 26 '15 at 15:58
  • And if the first is 60% and the second 10%? – BCS Aug 26 '15 at 18:23
  • You would have a wide view of the first content section and a skinny sidebar. – dinomix Aug 26 '15 at 18:26
  • i.e. exactly what I'm wanting to not get. – BCS Aug 26 '15 at 20:49
  • So don't set it to 60 and 10, set it to whatever you do want to get, my point is that you have to set something, there is no magic that will just 'put them side by side' – dinomix Aug 26 '15 at 20:58
  • It's sounding like "use a table for layout" is actually as close to what I want as I'm going to get. – BCS Aug 26 '15 at 21:26
  • That sound reasonable. – dinomix Aug 26 '15 at 21:36