Troubleshooting: Two CSS elements side-by-side, w/ padding in between

Question

I'm trying to get the primary text on a group of pages to show up in a two-column format, with 30px of padding in between. I also want to keep the paragraphs in each column aligned in the way I've chosen no matter how the user resizes the window. I've been told not to use tables for anything that's not spreadsheet data, so I tried using the method I found here -- Make two CSS elements fill their container, side-by-side, with margin. Unfortunately, for whatever reason it's just not working for me: the "main" div (which I'm trying to restrict to 75% width so that the "side" div can sit next to it) is appearing at full width in all browsers, and when I try to "inspect element" in Firefox it doesn't even show a width property at all!

Here's the adaptation I've been trying to use:

HTML:

<div class="text">
            <div class="main">
                <p> Main body text blahblahblah. </p>
            </div>
            <div class="side">
                <p> Testing side text container setup. </p>
            </div>
</div>

CSS:

.text {
    margin: 20px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

.main {
    display: inline-block; 
    clear: both;
    width: 75%
    margin: 0;
    padding-right: 30px;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.main > p {
    display: block;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border: none;
}

.side {
    display: inline-block;
    width: 25%;
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.side > p {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

Any idea what's going wrong?

Something like this? http://jsfiddle.net/qq5eF/ – Vikas Ghodke Nov 20 '13 at 04:23 — Vikas Ghodke, Nov 20 '13 at 04:23

score 0 · Accepted Answer · answered Nov 20 '13 at 04:28

0

I looked into your code and noticed that in your CSS there is an invalid line. The line which you use to set the margin you are missing a semicolon which is throwing a few things off, one of them being the margin.

Hope that helps.

answered Nov 20 '13 at 04:28

GSaras

16
2

UGH thank you! I do have two follow-up questions, though: 1. Why won't the 75-25 setup work? As another user mentioned, I have to lower the percentage to account for borders/etc (70-25 is working just fine), but I thought that the whole point of the "box-sizing" thing was to allow me to get around that. 2. My ".side" text is appearing roughly one line lower on the page than the rest of the ".main" text. Any idea why? I'd like to align the top of each ".side" paragraph to the top of its corresponding ".main" paragraph if at all possible. – ethanjrt Nov 20 '13 at 04:37
Answer for problem one. Everything in CSS is relative to its container. Since you are using 100% of the container by having the 75-25 model, CSS sees that you are hitting 100% of your width which means that we need a new line. So any combination of widths that will add up to 99 will work. One solution that I would probably go with would be to float the side class to the right. It will still be 25% of the div that contains it but will be pushed all the way to the edge of the page. CSS for this would be float: right; This may also help you fix your formatting. – GSaras Nov 20 '13 at 05:12

score 0 · Answer 2 · answered Nov 20 '13 at 05:39

I have used the same code as you did and introduced one tiny change which is a inline-block hack. First you look at this explanation and then the updated demo.

Initial code:

<div class="text">
    <div class="main">
        <p>Main body text blahblahblah.</p>
    </div>
    <div class="side">
        <p>Testing side text container setup.</p>
    </div>
</div>

What is wrong with it?

There is white-space between div.main and div.side.

How to fix it?

There are a number of hacks. I have used the html comment hack. You can read about other methods on this post by Chris: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

New code:

<div class="text">
    <div class="main">
        <p>Main body text blahblahblah.</p>
    </div><!--
    notice this
    --><div class="side">
        <p>Testing side text container setup.</p>
    </div>
</div>

Now you see the demo.

Troubleshooting: Two CSS elements side-by-side, w/ padding in between

2 Answers2

What is wrong with it?

How to fix it?