homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Placing multiple divs next to each other
I want to place multiple divs next to each other. The amount of divs varies
markoudev




msg:3681043
 10:28 pm on Jun 22, 2008 (gmt 0)

Hi all,

I'm trying to figure out how I can place multiple div items next to each other. In other words: I want to center divs.

To give you an idea of the context: I'm working on a photo album =)


-----(album1)--(album2)--(album3)-----
-----(album4)-------------------------

This is acceptable, too:

-----(album1)--(album2)--(album3)-----
---------------(album4)---------------

Or, with two albums on the lower line:

-----(album1)--(album2)--(album3)-----
----------(album4)--(album5)----------

Now, as you can see the amount of divs varies. It can be one, two, three or more, depending on the rest of the layout (fixed width versus variable width). I would like to center all of the album divs that are on the page.

I've managed to get divs next to each other, using float:left. This however causes that I'm no longer able to center them, because they're floating left.

So my question: how can I center a number of divs that are next to each other?

Thanks a lot!

 

D_Blackwell




msg:3681157
 2:18 am on Jun 23, 2008 (gmt 0)

This works nicely if you keep your page text above, between, or below the .wrapper <div>(s) of the image gallery. If you want to add captions and such and 'fancy it up' within the .wrapper <div> things gets a whole lot trickier, and that is flour from another sack. (Think about working with a <dl> in that event, and retaining the simplicity of the concept.) Works in FF, Opera, IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
Title
</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
html, body {
margin: 1em; padding: 0; font-size; 100%;
}
.wrapper {
text-align: center;
}
.box, .box p {
display: inline;
}
img {
width: 100px; height: 100px; border: .2em solid #900; margin: .2em;
}
a {
text-decoration: none;
}
a:hover img {
border: .2em solid #0000ff;/*NEEDS IE HOVER HACK*/
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<p>
<a href="http://www.example.com">
<img src="aaa.jpg" alt="test" />
</a>
</p>
</div>
<div class="box">
<p>
<a href="http://www.example.com">
<img src="aaa.jpg" alt="test" />
</a>
</p>
</div>
<div class="box">
<p>
<a href="http://www.example.com">
<img src="aaa.jpg" alt="test" />
</a>
</p>
</div>
<div style="clear: left;">
</div>
</div>
<div class="wrapper">
<div class="box">
<p>
<a href="http://www.example.com">
<img src="aaa.jpg" alt="test" />
</a>
</p>
</div>
<div class="box">
<p>
<a href="http://www.example.com">
<img src="aaa.jpg" alt="test" />
</a>
</p>
</div>
</div>
</body>
</html>

markoudev




msg:3681180
 3:13 am on Jun 23, 2008 (gmt 0)

Cool thanks, that works great for individual pictures. However, I'm building such a system that allows you to place albums within albums and for each album it'll show a folder image with a thumbnail in it. This folder image is the background image.

I've outlined the boxes in from the HTML code you gave me and it looks a bit funny. I understand why my background images aren't visible ^^ Changing the height doesn't seem to work and padding doesn't do what I want.

<>

[edited by: SuzyUK at 8:08 pm (utc) on June 24, 2008]
[edit reason] Please No example URI's see charter [/edit]

markoudev




msg:3684752
 1:11 am on Jun 27, 2008 (gmt 0)

Can anyone help me out?

appi2




msg:3684822
 3:35 am on Jun 27, 2008 (gmt 0)

Not sure what your question is, looks like you gave a link, naughty person;)

You cant set a height on an element with display:inline. So that means you wont be able to set the height on
.box, .box p {
display: inline;
}

for example add this to the bottom of the code D_Blackwell gave you and you will notice the height is ignored.

.box {height:400px; border:2px solid green;}

adding borders to stuff you don't understand is a good tip, if you cant see it, how do you know whats happening.

Going back to your original question about using float and centering, you can wrap the floats in a div and center that div. Although with this method you have to know how wide your divs are going to be.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#centerwrapper {
width:462px;
margin:0 auto;
overflow:hidden;
border:4px solid green;
}

#centerwrapper div {
float:left;
width:150px;
height:150px;
border:2px solid red;
}

img {
width: 100px;
height: 100px;
border: .2em solid #900;
margin: .2em;
}
</style>
</head>
<body>
<div id="centerwrapper">
<div><a href="http://www.example.com"> <img src="1px-red.gif" alt="test" /> </a></div>
<div><a href="http://www.example.com"> <img src="1px-green.gif" alt="test" /> </a></div>
<div><a href="http://www.example.com"> <img src="1px-blue.gif" alt="test" /> </a></div>
</div>
</body>
</html>


ps if your having problems, post code samples, not links to your code.

markoudev




msg:3684839
 4:23 am on Jun 27, 2008 (gmt 0)

Hm I guess I could use that, that's much better than what I've built myself ;) Thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved