0

I'm trying to do is have two boxes, side-by-side, that stay at 50% of the screen width each so that they stay at 50% regardless of the screen width.

However, I'm also trying to put boxes with text inside each of those boxes, but I want the inside boxes completely centered and to remain at a fixed width so that the text doesn't shift around as the screen width changes.

Anyone have any ideas? Seems like a simple thing, but I'm just getting started in CSS, so bear with me.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
DrewK
  • 115
  • 2
  • 1
    Welcome to Stack Overflow! Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jun 12 '15 at 15:51

3 Answers3

0

You can use CSS this way:

   .half-screen{
       box-sizing: border-box;
       display: inline-block;
       width: 50%
    }

And then you do your logic inside those box

Note that you can use vertical-align: top; if you want them to be side by side and have the same starting point

Yann Chabot
  • 4,789
  • 3
  • 39
  • 56
0
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}

#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}

#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}

. . .

<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
DrewK
  • 115
  • 2
0

A fixed size in the center of two side-by-side boxes:

.container {
  height: 200px;
  width: 300px;
  background-color: lightgray;
  font-size: 0;
}
.box {
  display: inline-block;
  width: 50%;
  height: 100%;
  background-color: dodgerblue;
  position: relative;
  border: solid 1px #222;
  box-sizing: border-box;
}
.subbox {
  height: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: indianred;
}
<div class="container">
  <div class="box box1">
    <div class="centered subbox">
    </div>
  </div>
  <div class="box box2">
    <div class="centered subbox">
    </div>
  </div>
</div>
Josh Burgess
  • 9,327
  • 33
  • 46
  • Wow...thanks! Man, there's a lot I have to learn...holy smokes. I appreciate your help! – DrewK Jun 12 '15 at 16:13
  • Okay...now I have another issue...maybe you can help. I have text of uneven lengths that I'm putting into each subbox; let's say a sentence in one box and a paragraph in the other. I'd like BOTH box1 and box2 to stretch vertically to accommodate the longer text so that those boxes stay the same length. Does that make sense? – DrewK Jun 13 '15 at 03:09
  • @DrewK – Already has an answer here: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – Josh Burgess Jun 15 '15 at 14:24