Alternating left/right alignment

**fisch0920** · 05-16-2006, 10:05 PM

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!

**fisch0920** · 05-16-2006, 10:40 PM

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;
}

**coothead** · 05-17-2006, 03:25 AM

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>

**DeadMeatGF** · 05-17-2006, 11:02 AM

Before you ask, if you increase the widths so they overlap each other, it still works

**fisch0920** · 05-17-2006, 04:36 PM

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

**DeadMeatGF** · 05-17-2006, 05:49 PM

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.

Thread: Alternating left/right alignment

Thread Tools

Related

Float image and left alignment Forum: CSS Forum

left side scroll bar Forum: CSS Forum

extensible left column Forum: CSS Forum

left nav spacing Forum: CSS Forum

no left click but only once Forum: HTML Forum

Alternating left/right alignment

Re: Alternating left/right alignment

Re: Alternating left/right alignment

Re: Alternating left/right alignment

Re: Alternating left/right alignment

Re: Alternating left/right alignment

Tags for this Thread

Cloudjiffy- PaaS for Developers