I want a layout like this, how can i align one left one right and two middle ones on top of each other like this????

    google 'css 3 column layout' - then stack 2 divs in your middle column. that should get you started.

      Use the CSS float property. The CSS3 column layout properties aren't supported by any of the major browsers (yet) except Opera.

        would suggest to us float or even simpy a table aswell
        don't know a single person who uses Opera

        i barely have that browser for testing

          CSS3's multicolumn rules (which are also supported by Firefox (though some still have a -moz- prefix) and Chrome (which needs -webkit-) are for content that can flow from one column to the next.

          You know, that wireframe reminds me of the old CSS1 Acid Test...

            I should have been more clear... I wasn't referring to CSS3 Column Layout... I was just referring to that search rendering lots of decent results to point you in the right direction of doing a 3 column layout w/ css...

            quick example:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>3 columns thing</title>


<style>
#mainWrap{
 width:610px;
 height:700px;
 border:1px solid black;
}
#mainLeft{
 width:200px;
 height:700px;
 margin:auto;
 float:left;
 border:1px solid pink;	
}
#mainRightWrap{
 width:404px;
 height:700px;
 float:right;
 border:1px solid green;	
}
#midCol{
 width:200px;
 height:700px;
 margin:auto;
 float:left;
 border:1px solid black;	
}
#rightCol{
 width:200px;
 height:700px;
 margin:auto;
 float:right;
 border:1px solid pink;	
}

#midColTop{
 width:198px;
 height:347px;
 border:2px solid red; 	
}

#midColBot{
 width:198px;
 height:347px;
 border:2px solid black; 	
}


</style>

</head>

<body>
<div id="mainWrap">
  <div id="mainLeft">
  left content
  </div>

  <div id="mainRightWrap">
  	<div id="midCol">
    	<div id="midColTop">stuff on top</div>
        <div id="midColBot">stuff on bottom</div>
    </div>
    <div id="rightCol">right content</div>
  </div>
</div>
</body>
</html>
              6 days later

              I'd wager you could make a middle div with a percentage width and margin:auto to center it then you could float one left and one right.

                Write a Reply...