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:le ft; height:121px; width:180px; border: solid
yellow"><img src="images/1.jpg"></div>
<div style="float:le ft; height:121px; width:180px; border: solid
yellow"><img src="images/2.jpg"></div>
<div style="float:le ft; height:121px; width:180px; border: solid
yellow"><img src="images/3.jpg"></div>
<div style="float:le ft; height:121px; width:180px; border: solid
yellow"><img src="images/4.jpg"></div>
</div>

Jul 21 '05 #1

Subscribe Reply

25461

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.co m> wrote in message
news:11******** ****@corp.super news.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.co m> 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.co m> wrote in message
news:11******** *****@corp.supe rnews.com...

w wrote:
"mscir" <ms***@yahoo.co m> 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******** ************@go lden.net...

"mscir" <ms***@yahoo.co m> wrote in message
news:11******** *****@corp.supe rnews.com...
w wrote:
"mscir" <ms***@yahoo.co m> 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="imgwrapp er">
<img class="pic" src="madison_fi les/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_fi les/M268-MADISON-LR.gif">
<img class="pic" src="madison_fi les/M268-MADISON-STAIRS.gif">
<img class="pic" src="madison_fi les/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_fi les/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.s html" title="The Wyndham"><img
src="madison_fi les/wyndhamthumb.jp g" alt="Wyndham thumbnail" height="84"
width="130"></a>
<a href="madison.s html" title="The Wyndham"><img
src="madison_fi les/madisonthumb.jp g" alt="Madison thumbnail" height="84"
width="130"></a></td></tr>
<a href="dufferin. shtml" title="The Dufferin"><img
src="madison_fi les/dufferinthumb.j pg" alt="Dufferin thumbnail"
height="84" width="130"></a></td></tr>
<a href="bancroft. shtml" title="The Bancroft"><img
src="madison_fi les/bancroftthumb.j pg" alt="Bancroft thumbnail"
height="84" width="130"></a></td></tr>
<a href="belaire.s html" title="The Belaire"><img
src="madison_fi les/belaireredthumb .jpg" alt="Belaire thumbnail"
height="84" width="130"></a></td></tr>
<a href="augusta.s html" title="The Augusta"><img
src="madison_fi les/augustathumb.jp g" alt="Augusta thumbnail" height="84"
width="130"></a></td></tr>
<a href="seville.s html" title="The Seville"><img
src="madison_fi les/sevillethumb.jp g" alt="Seville thumbnail" height="84"
width="130"></a></td></tr>
<a href="fairway.s html" title="The Fairway"><img
src="madison_fi les/fairwaythumb.jp g" 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.co m> wrote in message
news:11******** *****@corp.supe rnews.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="imgwrapp er">
<img class="pic" src="madison_fi les/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_fi les/M268-MADISON-LR.gif">
<img class="pic" src="madison_fi les/M268-MADISON-STAIRS.gif">
<img class="pic" src="madison_fi les/M268-MADISON-KIDSROOM.gif">
<img class="pic" src="madison_fi les/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.s html" title="The Wyndham"><img
src="madison_fi les/wyndhamthumb.jp g" alt="Wyndham thumbnail" height="84"
width="130"></a>
<a href="madison.s html" title="The Wyndham"><img
src="madison_fi les/madisonthumb.jp g" alt="Madison thumbnail" height="84"
width="130"></a></td></tr>
<a href="dufferin. shtml" title="The Dufferin"><img
src="madison_fi les/dufferinthumb.j pg" alt="Dufferin thumbnail" height="84"
width="130"></a></td></tr>
<a href="bancroft. shtml" title="The Bancroft"><img
src="madison_fi les/bancroftthumb.j pg" alt="Bancroft thumbnail" height="84"
width="130"></a></td></tr>
<a href="belaire.s html" title="The Belaire"><img
src="madison_fi les/belaireredthumb .jpg" alt="Belaire thumbnail"
height="84" width="130"></a></td></tr>
<a href="augusta.s html" title="The Augusta"><img
src="madison_fi les/augustathumb.jp g" alt="Augusta thumbnail" height="84"
width="130"></a></td></tr>
<a href="seville.s html" title="The Seville"><img
src="madison_fi les/sevillethumb.jp g" alt="Seville thumbnail" height="84"
width="130"></a></td></tr>
<a href="fairway.s html" title="The Fairway"><img
src="madison_fi les/fairwaythumb.jp g" alt="Fairway thumbnail" height="84"
width="130"></a></td></tr>
</div>

Does that do what you want?
Mike

Jul 21 '05 #9

Similar topics

5276

Floating a DIV to right of <Hx> element?

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 suggestions you might have. My H1 elements have width=75%, and to the right of each I want a small DIV that contains a hyperlink to related content. I want that link to be about 3em from the right-hand end of the header element. The only way I...

HTML / CSS

11145

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 dont know how to do is align the wrapper <div> (#maindiv) center. How is this done?

HTML / CSS

11404

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

1904

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. I've checked around Google for possible clues, some having a JavaScript solution to something I believe should be possible to fix in pure CSS. In fact, that's exactly what I need; a pure XHTML/CSS solution (no client-side scripting). Can...

HTML / CSS

3326

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...) document.all.Toolbar.style.pixelTop = document.body.scrollTop; But, this doesn't seem to work in any way with ASP.NET 2.0. The problem seems to lay in ASP.NET 2.0's default doctype... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...

ASP.NET

4362

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 float:left inside div#headerLeft and one float:right, inside div#headerRight. They're inside a div#header that has a background graphic. These are all inside an absolutely positioned div#top. In the browsers I've used the graphic/header takes all of...

HTML / CSS

1771

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 recenter, infringing on my other content. I have no problem keeping it in the center, but I'd like it to scroll horizontally when resized instead of recentering. The CSS I have on the main container is currently #content-body {border: 1px solid...

HTML / CSS

1701

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 want 2 fixed width divs to center on a background image that stretches across the whole screen). thanks

HTML / CSS

3616

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 Spreadsheet</a></li> <li> <a href="scripts/insertStock.php" title="Upload Data from Spreadsheet"> Upload Figures</a></li> <li> <a href="scripts/zeroise.php"

HTML / CSS

7852

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8216

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8349

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8221

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

5719

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

3882

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2364

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1455

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1192

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General