CODEWITHSUNDEEP
htmlcss
zhuanzhou
zhuanzhou

Reputation: 2443

organize the three div

<div class="group">
    <div class="1">...</div> //div1
    <div class="2">...</div> //div2
    <div class="3">...</div> //div3
</div>

is there a way to organize the three div shows like this.

div1   div3
div2

i have thought it long time.but still don't have any idea.

Upvotes: 0

Views: 2161

Answers (5)

Sean
Sean

Reputation: 381

You could use html table to position those DIVs

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

Have a look at http://jsbin.com/ogawi6 . Placed a <br> after the first div and some css

Upvotes: 2

Matt Helm
Matt Helm

Reputation: 47

Place div1 and div2 in a div-left and div3 in a div-right.

<html><body> 
   <div id="page">  
     <div id="content-primary">
       <div class="div1"></div>
       <div class="div2"></div>
     </div> 
     <div id="content-secondary">
       <div class="div3"></div>
     </div> 
   </div> 
 </body> 
</html>

and the CSS...

body { 
 text-align: center; 
} 
#page { 
 margin: 0 auto; 
 width: 960px; 
 text-align: left; 
} 
#content-primary { 
 float: right; 
 width: 60%;
 height:100%;
} 
#content-secondary { 
 float: right; 
 width: 20%;
 height:100%;
}

Upvotes: 2

Marcos Placona
Marcos Placona

Reputation: 21720

You mean like this: http://jsbin.com/uwuge3

Code:

  <div class="group">
    <div class="1" style="float:left;border:1px solid;">div 1</div>
    <div class="3" style="border:1px solid red;">div 3</div>
    <div class="2">div 2</div> 
  </div>

Upvotes: 1

stecb
stecb

Reputation: 14746

something like this?

<div class="group">
    <div class="one">div 1</div>
    <div class="three">div 3</div> 
    <div class="two">div 2</div>
</div>

.one, .three{
    float:left;
}
.three{
    margin-left:10px;
}
.two{
    clear:left;
}

http://jsfiddle.net/qw5dr/

Upvotes: 4

Related Questions