How to center adjacent floating left div's?

How do you center, like I am trying to do, below the group of images? Why
does it not work?
Example:

<div><h2>The Title</h2><img src="images/BigPicture.jpg" height="150px"
width="250px"></div>
</div>
<div align="center">
<div style="float:left; height:121px; width:180px; border: solid
yellow"><img src="images/1.jpg"></div>
<div style="float:left; height:121px; width:180px; border: solid
yellow"><img src="images/2.jpg"></div>
<div style="float:left; height:121px; width:180px; border: solid
yellow"><img src="images/3.jpg"></div>
<div style="float:left; height:121px; width:180px; border: solid
yellow"><img src="images/4.jpg"></div>
</div>

Jul 21 '05 #1

Follow Post Reply

25386

mscir

w wrote:

How do you center, like I am trying to do, below the group of images?

<snip>

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
* {
padding:0;
margin:0;
border: 0;
}
body{
width: 100%;
height: 100%;
text-align; center;
}
..wrapper{
width: 800px;
border: 1px solid red;
margin: 0 auto;
}
..image{
float: left;
height: 121px;
width: 180px;
border: 1px solid yellow;
}
..clear{
clear: both;
}
</style>
</head>

<body>
<div class='wrapper'>
<div class='image'><img src="images/1.jpg"></div>
<div class='image'><img src="images/2.jpg"></div>
<div class='image'><img src="images/3.jpg"></div>
<div class='image'><img src="images/4.jpg"></div>
<div class='clear'></div>
</div>
</body>
</html>

Jul 21 '05 #2

mscir

mscir wrote:

w wrote:
How do you center, like I am trying to do, below the group of images?

<snip>
Try this:

<snip>

Apologies, I forgot to adjust the wrapper div width:

width: 728px;

Mike

Jul 21 '05 #3

"mscir" <ms***@yahoo.com> wrote in message
news:11************@corp.supernews.com...

mscir wrote:
w wrote:
How do you center, like I am trying to do, below the group of images?

<snip>
Try this:

<snip>

Apologies, I forgot to adjust the wrapper div width:

width: 728px;

Mike

Thank you Mike,

This works. I should specify that there are an unknown amount of images and
the window is autostretch. I am trying to get as many images as possible
horizontally, so I would rather not specify the width of the wrapper.

Is this possible?

Jul 21 '05 #4

mscir

w wrote:

"mscir" <ms***@yahoo.com> wrote
mscir wrote:
w wrote:
How do you center, like I am trying to do, below the group of images?
<snip>

Apologies, I forgot to adjust the wrapper div width:
width: 728px;
Mike

This works. I should specify that there are an unknown amount of images and
the window is autostretch. I am trying to get as many images as possible
horizontally, so I would rather not specify the width of the wrapper.

Is this possible?

Sure, maybe something like this:

..wrapper{
width: 80%; /* adjust width relative to body/container */
margin: 0 auto;
}

Mike

Jul 21 '05 #5

"mscir" <ms***@yahoo.com> wrote in message
news:11*************@corp.supernews.com...

w wrote:
"mscir" <ms***@yahoo.com> wrote
mscir wrote:
w wrote:
>How do you center, like I am trying to do, below the group of images?
<snip>
Apologies, I forgot to adjust the wrapper div width:
width: 728px;
Mike

This works. I should specify that there are an unknown amount of images
and the window is autostretch. I am trying to get as many images as
possible horizontally, so I would rather not specify the width of the
wrapper.

Is this possible?

Sure, maybe something like this:

.wrapper{
width: 80%; /* adjust width relative to body/container */
margin: 0 auto;
}

Mike

I did try that % but to no avail.
I am new at this and look what happens?
http://www.officeactivate.com/schuit/madison.shtml
The div goes under my vertical thumbnails (which I don't want) and goes to
bottom of page.. Not sure why it is so long.
Any clues?

Thanks for the tips.

Jul 21 '05 #6

<w> wrote in message news:vJ********************@golden.net...

"mscir" <ms***@yahoo.com> wrote in message
news:11*************@corp.supernews.com...
w wrote:
"mscir" <ms***@yahoo.com> wrote
mscir wrote:
>w wrote:
>>How do you center, like I am trying to do, below the group of images?
><snip>
Apologies, I forgot to adjust the wrapper div width:
width: 728px;
Mike

This works. I should specify that there are an unknown amount of images
and the window is autostretch. I am trying to get as many images as
possible horizontally, so I would rather not specify the width of the
wrapper.

Is this possible?

Sure, maybe something like this:

.wrapper{
width: 80%; /* adjust width relative to body/container */
margin: 0 auto;
}

Mike

I did try that % but to no avail.
I am new at this and look what happens?
http://www.officeactivate.com/schuit/madison.shtml
The div goes under my vertical thumbnails (which I don't want) and goes
to bottom of page.. Not sure why it is so long.
Any clues?

Thanks for the tips.

It is almost there, I think I meant to say, center the pictures inside the
div, not center the div.
I am having a hard time centering the images inside the div.

I would love the 4 photos to be right beside each other, and the big
rendering would not wrap around.
The photos would then be a min. of 2 beside eachother and centered under the
big rendering above.

thanks,

Jul 21 '05 #7

mscir

<snip>

It is almost there, I think I meant to say, center the pictures inside the
div, not center the div.
I am having a hard time centering the images inside the div.
I would love the 4 photos to be right beside each other, and the big
rendering would not wrap around.
The photos would then be a min. of 2 beside eachother and centered under the
big rendering above.

How about this. You don't need to wrap each image in a div, just set the
image style the way you want it. Setting text align center centers the
images. If you don't control the width of the div it will expand to be
as wide as possible, it doesn't good to me this way but I'm sure you get
the idea.

..imgwrapper{
text-align: center;
}
..pic{
margin: 1px;
}

<div class="imgwrapper">
<img class="pic" src="madison_files/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_files/M268-MADISON-LR.gif">
<img class="pic" src="madison_files/M268-MADISON-STAIRS.gif">
<img class="pic" src="madison_files/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_files/exterior.jpg">
</div>
Also, use em or % to size fonts so the browser can resize them:

body, p, td {
font-size: 1em; /* 14px; */
line-height: 1em; /* 14px; */
And you can ditch the table and use a div.

..myCell {
background-color: #002c70;
padding: 0;
margin: 0;
border: 0;
width: 130px;
}

<div class='myCell'>
<a href="wyndham.shtml" title="The Wyndham"><img
src="madison_files/wyndhamthumb.jpg" alt="Wyndham thumbnail" height="84"
width="130"></a>
<a href="madison.shtml" title="The Wyndham"><img
src="madison_files/madisonthumb.jpg" alt="Madison thumbnail" height="84"
width="130"></a></td></tr>
<a href="dufferin.shtml" title="The Dufferin"><img
src="madison_files/dufferinthumb.jpg" alt="Dufferin thumbnail"
height="84" width="130"></a></td></tr>
<a href="bancroft.shtml" title="The Bancroft"><img
src="madison_files/bancroftthumb.jpg" alt="Bancroft thumbnail"
height="84" width="130"></a></td></tr>
<a href="belaire.shtml" title="The Belaire"><img
src="madison_files/belaireredthumb.jpg" alt="Belaire thumbnail"
height="84" width="130"></a></td></tr>
<a href="augusta.shtml" title="The Augusta"><img
src="madison_files/augustathumb.jpg" alt="Augusta thumbnail" height="84"
width="130"></a></td></tr>
<a href="seville.shtml" title="The Seville"><img
src="madison_files/sevillethumb.jpg" alt="Seville thumbnail" height="84"
width="130"></a></td></tr>
<a href="fairway.shtml" title="The Fairway"><img
src="madison_files/fairwaythumb.jpg" alt="Fairway thumbnail" height="84"
width="130"></a></td></tr>
</div>

Does that do what you want?
Mike

Jul 21 '05 #8

Looks great! I updated the site test page and changed all to em as well. I
thought I read that it was not as supported as pix so that is why I used
pix. Do you have another opinion on this?

I will add black borders to the pics and labels under the thumbs and it
should be exactly what I need. Thank you very much!
"mscir" <ms***@yahoo.com> wrote in message
news:11*************@corp.supernews.com...

<snip>
It is almost there, I think I meant to say, center the pictures inside
the div, not center the div.
I am having a hard time centering the images inside the div.
I would love the 4 photos to be right beside each other, and the big
rendering would not wrap around.
The photos would then be a min. of 2 beside eachother and centered under
the big rendering above.

How about this. You don't need to wrap each image in a div, just set the
image style the way you want it. Setting text align center centers the
images. If you don't control the width of the div it will expand to be as
wide as possible, it doesn't good to me this way but I'm sure you get the
idea.

.imgwrapper{
text-align: center;
}
.pic{
margin: 1px;
}

<div class="imgwrapper">
<img class="pic" src="madison_files/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_files/M268-MADISON-LR.gif">
<img class="pic" src="madison_files/M268-MADISON-STAIRS.gif">
<img class="pic" src="madison_files/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_files/exterior.jpg">
</div>
Also, use em or % to size fonts so the browser can resize them:

body, p, td {
font-size: 1em; /* 14px; */
line-height: 1em; /* 14px; */
And you can ditch the table and use a div.

.myCell {
background-color: #002c70;
padding: 0;
margin: 0;
border: 0;
width: 130px;
}

<div class='myCell'>
<a href="wyndham.shtml" title="The Wyndham"><img
src="madison_files/wyndhamthumb.jpg" alt="Wyndham thumbnail" height="84"
width="130"></a>
<a href="madison.shtml" title="The Wyndham"><img
src="madison_files/madisonthumb.jpg" alt="Madison thumbnail" height="84"
width="130"></a></td></tr>
<a href="dufferin.shtml" title="The Dufferin"><img
src="madison_files/dufferinthumb.jpg" alt="Dufferin thumbnail" height="84"
width="130"></a></td></tr>
<a href="bancroft.shtml" title="The Bancroft"><img
src="madison_files/bancroftthumb.jpg" alt="Bancroft thumbnail" height="84"
width="130"></a></td></tr>
<a href="belaire.shtml" title="The Belaire"><img
src="madison_files/belaireredthumb.jpg" alt="Belaire thumbnail"
height="84" width="130"></a></td></tr>
<a href="augusta.shtml" title="The Augusta"><img
src="madison_files/augustathumb.jpg" alt="Augusta thumbnail" height="84"
width="130"></a></td></tr>
<a href="seville.shtml" title="The Seville"><img
src="madison_files/sevillethumb.jpg" alt="Seville thumbnail" height="84"
width="130"></a></td></tr>
<a href="fairway.shtml" title="The Fairway"><img
src="madison_files/fairwaythumb.jpg" alt="Fairway thumbnail" height="84"
width="130"></a></td></tr>
</div>

Does that do what you want?
Mike

Jul 21 '05 #9

How to center adjacent floating left div's?

This discussion thread is closed

Similar topics