CODEWITHSUNDEEP
csshtmlposition
user1527634
user1527634

Reputation: 31

Can't place one div below another - they appear on top of each other now

I have 2 containers right now and I want 1 of these containers to be below the other. In each of these containers, I have 2 side by side div's courtesy of this post: Is it possible to put two div elements side-by-side without using CSS float?

<div id="container">
    <div class="one">testing one</div>
    <div class="two">testing two</div>
</div>
<div id="container">
    <div class="one">testing three</div>
    <div class="two">testing four</div>
</div>

http://jsfiddle.net/zWk2y/14/

I want to one&two, three&four next to each other but one&two on top of three&four so it makes a 2x2 grid. But it keeps appearing on top of each other.

Thanks

Upvotes: 1

Views: 24620

Answers (7)

Sanjay
Sanjay

Reputation: 781

First you cant use id as repeating can you please change it like this

HTML

<div class="container">
<div class="one">testing one</div>
<div class="two">testing two</div>
</div>
<div class="containers">
<div class="one">testing three</div>
<div class="two">testing four</div>
</div>

CSS 

.container {
padding: 0 0 0 8%;
width: 100%;

}

.containers{
padding: 0 0 0 8%;
width: 100%;

}


.one {
width: 45%;
position: relative;
left: 0;
}

.two {
width: 45%;
position: relative;
left: 50%;
}

Upvotes: 0

Tuan
Tuan

Reputation: 514

If you wanted to use floats, you can do it this way.

HTML:

<div class="container">
    <div class="one">one</div>
    <div class="two">two</div>
</div>
<div class="container">
   <div class="one">three</div>
   <div class="two">four</div>
</div>

CSS:

.container {
    padding: 0 0 0 8%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.one {
    width: 45%;
    position: relative;
    left: 0;
    float: left;
}
.two {
   width: 45%;
   position: relative;
   float:left;
}

You can't have two elements with the same id. Replaced <div id="container"> with <div class="container">

Example: http://jsfiddle.net/hVgQv/

Upvotes: 0

Dan
Dan

Reputation: 519

Simple,

.container {
    padding: 0 0 0 8%;
}
.inner {
    float:left;
    width:45%;
}

<div  class="container">
    <div class="inner">testing one</div>
    <div class="inner">testing two</div>
</div>
<div class="container">
    <div class="inner">testing three</div>
    <div class="inner">testing four</div>
</div>

Upvotes: 0

Pranali Desai
Pranali Desai

Reputation: 974

.container {
    padding: 0 0 0 8%;
    width: 100%; 
}
.one {
width:50%;
float:left;
}
.two {
width:50%;
float:left;
}

Upvotes: 0

Shiridish
Shiridish

Reputation: 4962

You have few issues with your markup. See the below demo and code:

DEMO

HTML:

<div id="container1">
    <div class="one">testing one</div>
    <div class="two">testing two</div>
</div>
<div id="container2">
    <div class="one">testing three</div>
    <div class="two">testing four</div>
</div>

CSS:

#container1 {
background-color:yellow;
}
#container2
{
    background-color:orange;
}
.one,.two
{
    display:inline-block;
    width:49%;
    border:1px solid;
    height:30px;
}

Upvotes: 0

Antony
Antony

Reputation: 15106

Use <div class="container"> and apply the following CSS:

.one {
    width: 45%;
    display: inline-block;
}
.two {
    width: 45%;
    display: inline-block;
}

See fiddle.

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 10936

LIVE DEMO

HTML

<div id="container1">
  div class="one">testing one</div>
  <div class="two">testing two</div>
</div>
<div id="container2">
   <div class="one">testing three</div>
   <div class="two">testing four</div>
</div>

CSS

#container1, #container2 {
    padding: 0 0 0 8%;
    width: 100%;
}
.one {
    width: 45%;
    position: relative;
    display:inline-block;
}
.two {
    width: 45%;
    position: relative;
    display:inline-block;
}

You are using the same id container for both div's. Id should be unique.

Upvotes: 5

Related Questions