Thread: Alternating left/right alignment
Results 1 to 6 of 6
Related
-
Float image and left alignment Forum: CSS Forum
Replies: 0 -
left side scroll bar Forum: CSS Forum
Replies: 1 -
extensible left column Forum: CSS Forum
Replies: 2 -
left nav spacing Forum: CSS Forum
Replies: 3 -
no left click but only once Forum: HTML Forum
Replies: 7
-
05-16-2006, 10:05 PM #1
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!
-
05-16-2006, 10:40 PM #2
Re: Alternating left/right alignment
Code:|11111 | | 22222| |11111 | | 22222|
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;
}
-
05-17-2006, 03:25 AM #3bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
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>
-
05-17-2006, 11:02 AM #4
Re: Alternating left/right alignment
Before you ask, if you increase the widths so they overlap each other, it still works
-
05-17-2006, 04:36 PM #5
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>
Last edited by fisch0920; 05-17-2006 at 04:43 PM.
-
05-17-2006, 05:49 PM #6
Re: Alternating left/right alignment
Originally Posted by fisch0920
Code:#content { margin: 191px 0 0; <-- padding: 0 20px 135px; <-- min-width: 573px; width: 75%; background: url(Images/flowerDesign.gif) no-repeat bottom left; }
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.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum