SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 DIVs side by side - help req'd

    Hi All,

    At last work has unlocked access to this board......

    Can anyone tell me how to have 2 divs on the same level (side by side) I would them to be both approx 40% of screen width with one occupying the left hand side of the screen and the other on the right hand side, ideally I don't want to have to set absolute positions and then specify how far down from the top.

    Can this also be done without using a 3rd container DIV, i'm trying to go for flexibility, low maintenance and minimal of code.

    Have tried

    .left {margin: 4px 52% 4px 4px; }
    .right {margin:4px 4px 4px 52%; }

    <div class="left">LOGO goes here</div>
    <div class="right">text goes here</div>

    but this didn't work

    I then tried the more involved

    .left {margin: 4px 52% 4px 4px; position: relative; float:left; }
    .right {margin:4px 4px 4px 52%; position: relative; float:right; }

    <div>
    <div class="left">LOGO goes here</div>
    <div class="right">text goes here</div>
    </div>

    but this didn't work either.

    Can anyone help

    Cheers

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean something like this:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #column1, #column2{
     float:left;
     width:40%;
     border:1px solid #000;
     background:red;
     margin-left:10px;
     display:inline;/*ie double margin fix*/
    }
    #column2 {background:green;float:right;margin-right:10px;}
    </style>
    </head>
    <body>
    <div id="column1"> 
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
    </div>
    <div id="column2"> 
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
    </div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LMAO, that is EXACTLY what i'm after, dude i've been bashing that about for a day and a half.

    Thankyou very much

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a new similar problem if any one can help.

    I implemented the above code and all worked well, I even managed to work out that the next DIV down the page which was slamming into the 2 above it could be forced to behave itself by using clear:both on the DIV tag.

    However, the new problem is nested DIV tags, if iwere to this in tables it would look like this;

    <table width="100%">
    <td align="left"><img src="image.gif" height="100" width="100"></td>
    <td align="right" valign="middle">some text</td>
    </table>

    I tried implementing this in CSS using the following

    .leftBox {display:inline; border: solid 1px #000;}
    .rightBox {float:right; border: solid 1px #000;}

    <div class="leftBox">
    <img src="image.gif" height="100" width="100">

    <div class="rightBox">some text</div>
    </div>

    But I get some wierd results, I have played around with various combinations and sometimes the rightBox doesn't even appear inside the leftBox

    Ideally I would like the rightBox DIV to be vertically aligned inside the leftBox and for it to appear on the far right of the leftBox.

    Can any one help?

    Cheers

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If its just one line of text that needs centering then you can do this:

    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    p#ex1{
     text-align:right;
     line-height:100px;
    }
    p#ex1 img{float:left}
    </style>
    </head>
    <body>
    <!---- example 1 only works if text isn't going to wrap -->
    <p id="ex1"><img src="image.gif" height="100" width="100">some text</p>
    </body>
    </html>
    Otherwise vertical align is hard to do when refereed to block elements. In mozilla you can use display:table and display:table-cell but IE doesn't understand it.

    IF the elements height are know then you can position them exactly to achieve centering (See FAQ on vertical centering).

    If heights are not known then there is a solution here but may be a little complicated for you.

    http://www.sitepoint.com/forums/show...align+solution


    Hope that helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •