CODEWITHSUNDEEP
csshtml
user3059823
user3059823

Reputation: 65

how to position one div on the left and two divs to the right

i have this main_window div which is 800px wide, and 550 px height, then there is two divs that should be next to it, troubleshooting_area and timeline div, those two make up for the 550 in height but need to be floating to the right of the main window the two divs below should be next to the main window, how can i achieve that??

here is a demo http://jsfiddle.net/S8RC3/3/

<div class="appview_fullscreen app_ama">
 <center><strong>Auto Mechanics Alliance</strong> </br>
    <i>let us come together and become one</i>
 </center>
<div class="main_area">
    <div class="tabs_area">

    </div>
    <div class="main_window">

    </div>
    <div class="troubleshoot_area">

    </div>
    <div class="timeline">

    </div>
 </div>


</div>


body
{
    width: 100%;
    height: 100%;
    margin: 0px;
}
.appview_fullscreen
{
    width: 1005px;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
    padding: 2px;
}
.main_area
{
    border: 2px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
}

.main_window
{
    min-height: 550px;
    border: 1px solid green;
    width: 800px;
    margin: 2px 1px 1px 1px;
}
.troubleshoot_area
{
    border: 1px dotted green;
    height: 200px;
    width: 200px;
}
.timeline
{
    border: 1px solid green;
    height: 350px;
    width: 200px;
}

Upvotes: 0

Views: 144

Answers (2)

Sridhar R
Sridhar R

Reputation: 20418

Try these ways.

CSS

body
{
    width: 99%;
    height: 100%;
    margin: 0px;
}
.appview_fullscreen
{
    width: 1005px;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
    padding: 2px;
}
.main_area
{
    border: 2px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
}

.main_window
{
    min-height: 550px;
    border: 1px solid green;
    width: 800px;
    margin: 2px 1px 1px 1px;
    display:inline-block;
}
.troubleshoot_area
{
    border: 1px dotted green;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 76px;
    left: 808px;
}
.timeline
{
    border: 1px solid green;
    height: 350px;
    width: 200px;
    float:right;
    position: absolute;
    top: 76px;
    left: 808px;
}

DEMO Fiddle

Upvotes: 0

bentranter
bentranter

Reputation: 401

In your case, I would simply add:

position: absolute;
top: 76px;
left: 808px;

to your .timeline and .troubleshoot-area classes.

You can see an updated fiddle here: http://jsfiddle.net/S8RC3/4/

Upvotes: 3

Related Questions