CODEWITHSUNDEEP
csspositioninghtml
daveomcd
daveomcd

Reputation: 6555

CSS: Positioning divs

how can I get my divs to layout out like the below pic.

--------------  -------------------
|            |  |      Div2       |
|            |  -------------------
|   Div1     |  -------------------
|            |  |      Div3       |
|            |  -------------------
|            |  -------------------
|            |  |      Div4       |
--------------  -------------------

Everything I've tried has div's 2,3,4 lining up horizontally to each other. I tried to do clear: left; (or both) but they just end up under div 1. Thanks for the help!

Upvotes: 2

Views: 272

Answers (5)

Armchair Bronco
Armchair Bronco

Reputation: 2417

You could do something like this. But you'll have to explicitly set the height of your DIV's.

<div style="width:600px;height:600px;border:1px solid red;">
   <div style="float:left;width:300px;height:600px;border:1px solid green;">
      <h1>Div 1</h1>
   </div>
   <div style="float:left;">
      <div style="height:200px;width:298px;border:1px solid orange;"><h1>Div 2</h1></div>
      <div style="height:200px;width:298px;border:1px solid blue;"><h1>Div 3</h1></div>
      <div style="height:200px;width:298px;border:1px solid purple;"><h1>Div 4</h1></div>
   </div>
   <div style="clear:both;"></div>
</div>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195971

How is that

Html

<div class="container">
    <div class="big">biggy</div>
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
</div>

Css

.container{
    width:400px;
    overflow:hidden;
    border:1px solid #ccc;
    padding:10px 0px 0px 10px;
}
.big{
    width:160px;
    height:100px;
    float:left;
    background-color:#c55;
    padding:5px;
}
.small{
    width:180px;
    height:20px;
    float:left;
    background-color:#5c5;
    margin-bottom:10px;
    margin-left:15px;
    padding:5px;
}

demo: http://www.jsfiddle.net/gaby/em7yz/2/

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86872

Something like this will work, basicaly the approach is to simply position the elements where you need them, IMO this is an easy way to understand the base layout of your page. here you can see an example http://jsbin.com/izosi3/edit

<div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:150px;">
</div>
<div id="header" style="position:absolute; top:0px; left:150px; height:50px; right:0px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:150px; bottom:0px; right:0px;">
</div>

Upvotes: 0

Todd
Todd

Reputation: 3508

One of many possible solutions:

<html>
  <head>
    <style type="text/css">
      #div1, #div2, #div3, #div4 {
        border: 1px dashed #000;
        width: 300px;
      }
      #div1 {
        float: left;
      }
      #div2, #div3, #div4 {
        margin-left : 300px;
      }
    </style>
   </head>
   <body>
     <div id="div1">Div 1</div>
     <div id="div2">Div 2</div>
     <div id="div3">Div 3</div>
     <div id="div4">Div 4</div>
   </body>
 </html>

The border is there just to aid in seeing the divs.

Upvotes: 1

Demian Brecht
Demian Brecht

Reputation: 21368

I'd most likely have a container div for the right side, with the three rows nested within it.

Upvotes: 1

Related Questions