CSS DIV using percentages

Question

So I got this fiddle: http://jsfiddle.net/69WVx/3/

I have also attached the code. Basically, I want test2 and test3 to be inline with one another. I also want the widths of test2 and test3 to be %, as it's for a mobile responsive button.

Can this be done the way I'm doing it? Or am I screwing this all up?

As you can see, the DIV's test2 and test3 collapse on top of one another, as opposed to being inline.

HTML:

<div class="test">
    <div class="test1">
        <div class="test2">ORANGE</div>
        <div class="test3">APPLE</div>
    </div>
</div>

CSS:

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline;
    position: absolute;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline;
    position: absolute;
}

Answer 1

Try something like this , Trying my best to help .

Don't know if this is what you want. Fiddle

If you want to keep position absolute do the following

.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
  position :absolute;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
    position :absolute;
    margin-left:40%;
    }

Or Even this will do

.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;

}

Answer 2

Apply display: inline-block; for the inner blocks such as .test2 and .test3, so that you can achieve this..

Check this Fiddle...

CSS:

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
}

Answer 3

Try this:

Demo

Your mistake is:

1.You let .test2&.test3 position:absolute,this will cause them to be deleted from the normal flow.If you don't define the top,left,right,bottom of the elements,they will cover each other of course.However,you don't have the need to use "position" here.

2.Div should be displayed inline-block. Inline elements do not have width or height properties.So you can see though you let the divs width:40% ,it doesn't work. Let them display:inline-block;

Answer 4

Well here is what i tried i guess this is what u want ...

HTML :

<div class="test">
    <div class="test1">
        <div class="test2">ORANGE</div>
        <div class="test3">APPLE</div>
    </div>
</div>

CSS :

.test {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #FF0000;
}
.test1 {
    width: 90%;
    height: 50%;
    border: 1px solid;
    position: relative;
}
.test2 {
    width: 40%;
    border: 1px solid #00FF00;
    display: inline-block;
    position: relative;
}
.test3 {
    width: 40%;
    border: 1px solid;
    display: inline-block;
    position: relative;
}

here is the fiddle ----> DEMO

Well the reason why it overlapped was because you have positioned it absolute ...... either give relative positioning or provide the positioning for an absolute layout in order to get what you wanted ....

Answer 5

The position:absolute properties in your CSS were causing both .test2 and .test3 to display on top of one another. Removing that property from both elements provides the inline appearance you're looking for.

Also, as Jc. points out below, the display properties should be set to inline-block instead of inline

.test2 {
    width: 60%;
    border: 1px solid #00FF00;
    display: inline-block;
} 
.test3 {
    width: 30%;
    border: 1px solid;
    display: inline-block;
}

http://jsfiddle.net/69WVx/11/