Forum Moderators: not2easy
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!
<!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>
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]
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.
