139 users online (0 members and 139 guests)  

> > > > Alternating left/right alignment

  Results 1 to 6 of 6

Related

  1. Float image and left alignment    Forum: CSS Forum
    Replies: 0
  2. left side scroll bar    Forum: CSS Forum
    Replies: 1
  3. extensible left column    Forum: CSS Forum
    Replies: 2
  4. left nav spacing    Forum: CSS Forum
    Replies: 3
  5. no left click but only once    Forum: HTML Forum
    Replies: 7
  1. 05-16-2006, 10:05 PM #1
    fisch0920
    fisch0920 is offline
    fisch0920's Avatar
    New User
    Status
    Offline
    Join Date
    May 2006
    Posts
    4

    Alternating left/right alignment

    Hello,

    In my main content div, I have separate box divs for each entry in my "blog". Currently, they are all aligned on the left side; I would like, however, to have the first aligned on the left, the second on the right, the third on the left, ... and so on.

    Something like:

    | 11111 |
    | 22222|
    | 11111 |
    | 22222|

    where the "|" denotes the left and right sides of the main content div and the "11111" represents a left-aligned div, and the "22222" represents a right-aligned div. (the two overlap, so floating the 2nd to the right won't work, right?)

    The trouble I'm having is that I can't even get one box to align on the right side of the content div properly (it always aligns on the right side of the window). I know this has to be something simple, but this is my first project with CSS and I'd really appreciate it if someone with more experience could help me out.

    Thanks!
    Reply With Quote Reply With Quote
  2. 05-16-2006, 10:40 PM #2
    fisch0920
    fisch0920 is offline
    fisch0920's Avatar
    New User
    Status
    Offline
    Join Date
    May 2006
    Posts
    4

    Re: Alternating left/right alignment

    Code:
    |11111  |
|  22222|
|11111  |
|  22222|
    (the formatting was messed up in my first post)

    I figured out a temporary hack to align the divs on the right side, but I think I'll now have to use some javascript routine to dynamically position odd numbered divs on the left and even on the right. Does anyone know of a routine that takes care of this easily?


    -- temporary hack :

    #content .entryRight {
    width: 573px;
    position: relative;
    left: 100%;
    margin-left: -613px;
    padding-bottom: 37px;
    background: #FFFFFF url(Images/boxBottom.png) no-repeat bottom left;
    margin-bottom: 4em;
    }
    Reply With Quote Reply With Quote
  3. 05-17-2006, 03:25 AM #3
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    Re: Alternating left/right alignment

    Hi there fisch0920,

    I hope that I have read your post correctly.

    If so, then this should suit your requirements...
    Code:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>left and right divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container {
    width:760px;
    border:3px double #000;
    background-color:#eef;
    color:#000;
    margin:auto;
 }
.one,.two{     
    width:343px;  
    display:inline;
    text-align:justify;
    border:1px solid #000;
    background-color:#fee;
    color:#000;
    padding:10px;
    margin:10px;
 }
.one { 
    float:left;
 }
.two { 
    float:right;
 }
.clear {
   clear:both;
 }
-->
</style>

<script type="text/javascript">
<!--

//-->
</script>

</head>
<body>

<div id="container">

<div class="one">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. 
</div>

<div class="two">
Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>

<div class="one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. 
</div>

<div class="two">
Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>

<div class="one">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. 
</div>

<div class="two">
Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>

<div class="one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. 
</div>

<div class="two">
Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>

<div class="clear"></div>

</div>

</body>
</html>
    Reply With Quote Reply With Quote
  4. 05-17-2006, 11:02 AM #4
    DeadMeatGF
    DeadMeatGF is offline
    DeadMeatGF's Avatar
    Moderator
    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Alternating left/right alignment

    Before you ask, if you increase the widths so they overlap each other, it still works
    Reply With Quote Reply With Quote
  5. 05-17-2006, 04:36 PM #5
    fisch0920
    fisch0920 is offline
    fisch0920's Avatar
    New User
    Status
    Offline
    Join Date
    May 2006
    Posts
    4

    Re: Alternating left/right alignment

    Perfect! Thank you both very much for the help!!!

    It took a bit of trial & error to get it to work with my setup, so here's the relevant css that I ended up with in case anyone's interested (mainly just tweaking margins & padding):

    Code:
    #content {
   margin: 191px 0 0;
   padding: 0 20px 135px;
   min-width: 573px;
   width: 75%;
   background: url(Images/flowerDesign.gif) no-repeat bottom left;
}

.entry, .entryRight {
   clear: both;
   width: 573px;
   margin-bottom: 3em;
   padding-bottom: 37px;
}

.entry {
   float left;
   background: #FFFFFF url(Images/boxBottom.png) no-repeat bottom left;
}

.entryRight {
   float: right;
   background: #FFFFFF url(Images/boxBottom.png) no-repeat bottom left;
}

.clear {
   clear:both;
}

.entryStart {
   width: 553px; /* 573px; */
   padding: 30px 10px 0;
   background: #FFFFFF url(Images/boxTop.png) no-repeat;
}


and accessing them with:

<div id="content">

<div class=entry>
<div class=entryStart>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut varius nisi. Nam ac eros et felis molestie ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti.
</p>
</div>
</div>

<div class=entryRight>
<div class=entryStart>
<p>
Donec metus arcu, malesuada luctus, ullamcorper id, fermentum sed, ligula. Mauris hendrerit, massa in viverra fringilla, turpis nisl sollicitudin augue, non elementum augue erat et mauris. In hac habitasse platea dictumst. Pellentesque non mi rhoncus pede feugiat blandit. Vestibulum sapien. Proin fermentum mi sagittis mauris.
</p>
<p>
Sed faucibus erat eget nulla. Cras libero dolor, semper in, auctor eu, sollicitudin vel, enim. Nunc nec augue. In tincidunt velit in erat. Donec quis libero et nisi suscipit malesuada. Donec id eros.  Vestibulum at sapien. Aenean sit amet sapien eget est ullamcorper venenatis. Cras leo mi, scelerisque id, rhoncus id, ullamcorper a, est.
</p>
</div>
</div>

</div>
    I'm not quite sure why the .entryStart width has to be 20 pixels smaller than it actually appears onscreen (the boxTop and boxBottom entry background images are 573 pixels wide), but besides that, I think I understand everything else. Thank you very much again for the help
    Last edited by fisch0920; 05-17-2006 at 04:43 PM.
    Reply With Quote Reply With Quote
  6. 05-17-2006, 05:49 PM #6
    DeadMeatGF
    DeadMeatGF is offline
    DeadMeatGF's Avatar
    Moderator
    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: Alternating left/right alignment

    Quote Originally Posted by fisch0920
    I'm not quite sure why the .entryStart width has to be 20 pixels smaller than it actually appears onscreen (the boxTop and boxBottom entry background images are 573 pixels wide), but besides that, I think I understand everything else. Thank you very much again for the help
    At first glance, is it down to the
    Code:
    #content {
   margin: 191px 0 0; <--
   padding: 0 20px 135px; <--
   min-width: 573px;
   width: 75%;
   background: url(Images/flowerDesign.gif) no-repeat bottom left;
}
    You've only got 3 values, and as far as I can recall you should have 1, 2 or 4!
    Coincidentally, one of the values (in padding) is 20px, so I'd look there first for a cause.
    I'm not sure how CSS treats the missing value, but you may be expecting a "0" left padding and getting a 20px duplicated from the right.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »