[Web4lib] aligning divs horizontally

[Andrew Hankinson]

When getting things to line up horizontally, "float" and "clear" are  
your friends.

If you have three divs, use "float: left" to have them line up.
If you need to have something running below the boxes (another div,  
for example), do "clear: both" to have it wrap.

So if I wanted to do something like:

|  A   ||  B   ||  C  |
|            D           |

(assuming each box was assigned a class name based on its letter) I  
would do:

.a,
.b,
.c {
     float: left;
}

.d {
     clear: both;
     float: left;
}

You can then use margins to set the space between the boxes.

Hope that helps,
Andrew


On 2-Sep-07, at 3:21 PM, Araby Y Greene wrote:

>
> This worked for me.
>
> Optionally, position the body to set the context of subsequent
> positioned elements:
> body {position: relative;}
>
> Change the top position of layers 3, 4, 5 to:   top: 164px
> They will be positioned absolutely, relative to body.
>
> Remove the top margin from layer 4 to make the library image line up:
> #layer4.content {top-margin: 0;}
>
> Hope this helps,
> Araby
>
> _______________________________
> Araby Greene
> Web Development Librarian
> Getchell Library/322
> University of Nevada, Reno Libraries
> http://www.library.unr.edu
> araby at unr.edu
>
>> -----Original Message-----
>> From: web4lib-bounces at webjunction.org
>> [mailto:web4lib-bounces at webjunction.org] On Behalf Of Raumin
>> "Ray" Dehghan
>> Sent: Sunday, September 02, 2007 9:25 AM
>> To: web4lib
>> Subject: [Web4lib] aligning divs horizontally
>>
>> Dear Web4Lib colleagues:
>>
>>   I'm trying to align three div boxes in my site horizontally
>> - Layer3, Layer4, and Layer 5.  One - called "Layer3" appears
>> more out of line than the other two, but i want to make sure
>> they're all aligned horizontally.
>>
>>   I would appreciate any suggestions.
>>
>> the html url is:
>> http://www.westchicago.lib.il.us/R/stuff/chatt/wcpld.html
>>
>> the css is: http://www.westchicago.lib.il.us/R/stuff/chatt/wcpld.css
>>
>> just fyi - the javascript is:
>> http://www.westchicago.lib.il.us/R/stuff/chatt/wcpld.js
>>
>>
>> Thanks very much.
>>
>> Sincerely,
>> Raumin "Ray" Dehghan
>> Adult Services Librarian
>> West Chicago Public Library
>> _______________________________________________
>> Web4lib mailing list
>> Web4lib at webjunction.org
>> http://lists.webjunction.org/web4lib/
>>
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/

Andrew Hankinson
andrew.hankinson at gmail.com