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

Subscribe Post Reply

25454

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

by: Philip Semanchuk | last post by:

Hi all, I'm trying to find a way to place a small DIV just to the right of a header element. I've found a solution, but it is crude and I was hoping for something more elegant. I'd appreciate any...

HTML / CSS

center align a <div> element

by: bissatch | last post by:

Hi, I have the following page: www.martynbissett.co.uk/index_div.html It is very basic that all elements will be structured using <div> tags and CSS styles will define the layout. What I...

HTML / CSS

Make Firefox Center Content in a div Or td Tag By Using CSS?

by: joey.powell | last post by:

Make Firefox Center Content in a div Or td Tag By Using CSS? Does anyone know how to do this. IE works great with text-align:center; but Firefox just always left-aligns...

HTML / CSS

IE bug with floating <div>s

by: Kim André Akerø | last post by:

For some reason, I can't get the middle column of this setup to work properly in IE (go figure). It looks like it's supposed to in Opera and Firefox, but now I only need it to work in IE as well. ...

HTML / CSS

Floating Panel/Div's and Doctype

by: CMM | last post by:

Has any one gotten a "stay-in-view" floating div to work in ASP.NET 2.0? For those that don't know, the classic way is this (for IE anyway): (window.onscroll...)...

ASP.NET

Floating left and right in Safari

by: intuna | last post by:

I've seen a screen shot of my header graphic in Safari. (don't have Safari) I'm coding using Firefox and IE. In those browsers the behavior is consistent. I have two floated graphics, one...

HTML / CSS

Fixed center alignment of a div

by: Phox | last post by:

Hey there, I'm an amateur web designer with a rather important problem at hand: I have a centered div with content outside the main container, and when I resize my browser the centered div tries to...

HTML / CSS

center aligning floating divs without a fixed width wrapper

by: nlindsay | last post by:

I am trying to center align 2 left floated divs within a % width background. I know that setting the wrapper div to a fixed width works, but can it be done with a fluid background? (basically I...

HTML / CSS

Center UL within a div

by: code green | last post by:

I have this piece of code <div style="text-align:center" id="nav"> <h1>Stocktake Menu</h1> <ul> <li> <a href="HTML/upload.html" title="Upload Spreadsheet and Check Integrity"> Check...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

How to center adjacent floating left div's?

Similar topics