How do I implement responsive design into my CSS when I have two spans, side by side?

Question

I have a design challenge. I have two spans, side by side, and I don't really know how to do that kind of CSS and still make it responsive. I'd have too big of margins on one view port size and two small on another. Any suggestions on how to make it look kinda the same on every screen size, without a big space in between?

My CSS: (I know it's kinda long)

#lattice {
height: 93%;
width: 30%;
position: fixed;
background-color: white;
top: 40px;
right: .75%;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
overflow-y: scroll;
}
#intendedContent {
font-size: 16px;
position: fixed;
background-color: white;
top: 40px;
left: 1%;
display: inline-block;
overflow-y: scroll;
height: 93%;
width: 62.5%;
padding-left: 20px;
padding-top: 0px;
padding-right: 20px;
word-wrap: break-word;
line-height: 175%;
}

Relying on an XMLHttpRequest object, I really only have two spans:

        <span id="intendedContent">
        </span>
        <span id='lattice'>
        </span>

You do not provide enough information in your question to solve the problem. Please post a [fiddle](http://jsfiddle.net/) reproducing the issue and say exactly what you want. — anarchocurious, Nov 13 '13 at 02:55
Sorry... I'll see if I can post some HTML as well. I'm using fixed rules because I only use one of two things: absolute, or fixed. If I do absolute, I don't know what will happen to my page. — ilarsona, Nov 13 '13 at 03:02

score 2 · Accepted Answer · edited May 23 '17 at 11:50

It's hard to answer your question without knowing exactly what you're trying to do, but I suspect you are trying to make the spans stay side-by-side at any window size, but they are in fact stacking one on top of each other at small window sizes. Is that correct?

If so, you have three basic options:

Currently, you are setting relative (percent-based) widths for your elements but the padding is set in absolute units (px). This is probably forcing the combined widths of the span elements to be greater than 100%, which is the width of the browser window, because the percentage width taken up by the absolutely-sized padding is greater at smaller window sizes. You can set your padding in percent and make sure the combined widths of both elements (including widths, padding, margins, and borders) plus the one character space rendered between inline-block elements is less than 100%. Or...
You can set box-sizing: border-box; on the spans and, thus, their padding will be rendered inside of the width you set. See here for more on box-sizing. If you do this, don't forget the prefixed versions (e.g. -webkit-box-sizing: border-box).
Arguably, to make your site responsive, as you mentioned in your question, you should not want the spans to appear side-by-side at every browser width. For example, on a portrait-oriented phone your users would probably find it more accessible to have the spans stacked one on top of each other. Whilst this goes outside the scope of your question (and I do not know what you are intending to do with the span elements), I would suggest doing this with media queries.

If you edit your question to let us know your intentions I can be more specific and helpful :)

Thanks... that was exactly what I was asking. You got it perfect. — ilarsona, Nov 13 '13 at 03:27

How do I implement responsive design into my CSS when I have two spans, side by side?

1 Answers1