Horizontal alignment

Discussion in 'CSS' started by Thibaut, Oct 26, 2009.

0
  1. #1
    Hello,

    I really suck in CSS :mad:
    I am trying to align horizontally 3 tables using rounded corners; here is the CSS I am using:

    
.raised2 {background: transparent;  width:70%; margin:0 auto;}
.raised2 h1, .raised2 p {margin:0 10px;}
.raised2 h1 {font-size:1em; color:red; letter-spacing:1px;}
.raised2 p {padding-bottom:0.5em;}

.raised2 .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b4, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b, .raised2 .b4b {display:block; overflow:hidden;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b {height:1px;}
.raised2 .b2 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised2 .b3 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised2 .b4 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised2 .b4b {background:#E2E4E4; border-left:1px solid #eee; border-right:1px solid #999;}
.raised2 .b3b {background:#E2E4E4; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised2 .b2b {background:#E2E4E4; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised2 .b1 {margin:0 5px; background:#fff;}
.raised2 .b2, .raised2 .b2b {margin:0 3px; border-width:0 2px;}
.raised2 .b3, .raised2 .b3b {margin:0 2px;}
.raised2 .b4, .raised2 .b4b {height:2px; margin:0 1px;}
.raised2 .b1b {margin:0 5px; background:#999;}
.raised2 .boxcontent {display:block;  background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #999;}
    Code (markup):
    And this is the HTML code:

    
<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 1</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 2</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 3</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
    Code (markup):
    How can I align horizontally those 3 tables ?
    Any clue ?

    Regards
    Thibaut
     
    Thibaut, Oct 26, 2009 IP
  2. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Copy code as it is and see the change.

    <html>
<head>
<style type="text/css">
.raised2 {background: transparent;  width:30%; margin:0; float:left}
.raised2 h1, .raised2 p {margin:0 10px;}
.raised2 h1 {font-size:1em; color:red; letter-spacing:1px;}
.raised2 p {padding-bottom:0.5em;}

.raised2 .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b4, .raised2 .b1b, .raised2 .b2b, 

.raised2 .b3b, .raised2 .b4b {display:block; overflow:hidden;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b 

{height:1px;}
.raised2 .b2 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised2 .b3 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised2 .b4 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised2 .b4b {background:#E2E4E4; border-left:1px solid #eee; border-right:1px solid #999;}
.raised2 .b3b {background:#E2E4E4; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised2 .b2b {background:#E2E4E4; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised2 .b1 {margin:0 5px; background:#fff;}
.raised2 .b2, .raised2 .b2b {margin:0 3px; border-width:0 2px;}
.raised2 .b3, .raised2 .b3b {margin:0 2px;}
.raised2 .b4, .raised2 .b4b {height:2px; margin:0 1px;}
.raised2 .b1b {margin:0 5px; background:#999;}
.raised2 .boxcontent {display:block;  background:#E2E4E4; border-left:1px solid #fff; 

border-right:1px solid #999;}

</style>
</head>
<body>
<div>
<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 1</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 2</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 3</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>
</div>

</body>
</html>
    HTML:
     
    Om ji Kesharwani, Oct 26, 2009 IP
    Thibaut likes this.
  3. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Look at this Line..

    .raised2 {background: transparent; width:30%; margin:0; float:left}
     
    Om ji Kesharwani, Oct 26, 2009 IP
  4. Thibaut

    Thibaut Well-Known Member

    Messages:
    886
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    140
    #4
    Thanks, this is working fine
     
    Thibaut, Oct 27, 2009 IP