vini
vini

Reputation: 4740

place divs next to each other and one below the other

enter image description here

i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:

 #container {
   position: relative;
   height: 400px;
   width: 100%;
   min-width: 400px;
   margin: 0 auto;


}
#left, #right {
    position: absolute;
    bottom: 201px;
}
#left {
    left: 0;
    width: 484px;
    height: 195px;


}
#right {
    right: 0;
    width: 508px;
    height: 196px;


}

One more thing my container contains all the divs

Someone please help

Upvotes: 1

Views: 195

Answers (1)

Dipak
Dipak

Reputation: 12190

Something similar to this - JSFiddle ?

HTML:

<div class="row">
    <div class="col1">One</div>
    <div class="col2">two</div>
</div>
<div class="row">
    <div class="col1">One</div>
    <div class="col2">two</div>
</div>

CSS:

.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }

Upvotes: 1

Related Questions