SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Screamager45's Avatar
    Join Date
    Dec 2003
    Location
    Norwich
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question aligning a div within a div, help appreciated

    Hi,

    Just wanted to know if anyone knows of a way that I can have two different alignments within a div.

    basically I have a number of different divs within another div and I want some to align to the left of this div and some to the right.

    Does anyone know a way I can do this??

    Help is much appreciated as I am pretty stumped at the moment.

    I've attached a picture to show you what I mean... (but I'm not sure how to show it )

    The dark and two light blue bars are separate divs and the light (turquiose? ) blue background is another div.

    I need to get it so the dark blue ones align left and the light blue ones align right. This has completely stumped me!!!

    Also, I need to add in a one pixel space inbetween the divs, but whenever I add in a 1px spacer, I get a large gap as shown by the red arrows.

    Please help me, I'm going spare .

    Thanks...

    Dave
    Attached Images Attached Images
    Last edited by Screamager45; Dec 30, 2003 at 11:26.

  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,

    Your attachment isn't showing yet but it sounds like you need to float the elements left and right.

    Here's an example of some floats for you to play around with until we see what you really want

    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">
    .outer {
    width:300px;
    height:400px;
    background:red;
    }
    .float1, .float2, .float3, .float4, .float5, .float6 {
    width:100px;
    height:100px;
    margin:10px;
    }
    .float1, .float2, .float3 {float:left}
    .float4, .float5, .float6 {float:right}
    .float1, .float4 {background:green;} 
    .float2, .float5 {background:yellow;} 
    .float3, .float6 {background:blue;} 
    </style>
    </head>
    <body>
    <div class="outer"> 
    <div class="float1">float 1</div>
    <div class="float4">float 4</div>
    <div class="float2">float 2</div>
    <div class="float5">float 5</div>
    <div class="float3">float 3</div>
    <div class="float6">float 6</div>
    </div>
    </body>
    </html>
    This of course may be nothing like what you are trying to do

    Paul

  3. #3
    SitePoint Enthusiast Screamager45's Avatar
    Join Date
    Dec 2003
    Location
    Norwich
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul that is exactly what I needed.

    It's so frustrating when it's just one attribute I need to change :P

    Any ideas on how to put a 1px space between each of those Divs as well? I've tried putting spacer gifs in, but it doesn't move the divs down.

    Thanks again

    Dave

  4. #4
    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,

    The good thing about CSS is that you don't need spacer gifs anymore.

    To move any of the floats from their positions you can use one of the margin properties to move them around a bit. (e.g.margin-top:1px).(remember that the margins of floated elements are never collapsed so you need to take into account the margins of other floats etc.)

    There is also a bug in ie where the margin of a float nearest the windows edge is doubled so you have to watch out for that as well.

    If you post the code your using and tell me where you want the space I'll show you how to do it.

    Paul

  5. #5
    SitePoint Enthusiast Screamager45's Avatar
    Join Date
    Dec 2003
    Location
    Norwich
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul.

    That's exactly what I needed to know (again)

    Cheers for you help. Much appreciated.

    IOU 1 pint

  6. #6
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Screamager45
    Thanks again Paul.
    IOU 1 pint
    Paul

    If we all ever get round to giving you the drinks we owe you for helping us out in here you are going to have a very, very big hangover.

    Happy New Year.

    In appreciation.

    John
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  7. #7
    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)
    Happy New Year.
    Thanks John glad to help and I'm sure your contributions haven't gone amiss either

    Happy New year to you also.

    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
  •