Current location: Hot Scripts Forums » General Web Coding » CSS » Centering a Floating div


Centering a Floating div

Reply
  #1 (permalink)  
Old 06-20-11, 08:35 PM
ownage ownage is offline
New Member
 
Join Date: Jun 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Centering a Floating div

This is not a fixed width layout. I have one or two CSS techniques applied to these images-- a shadow for all of them which requires floating, and there is also a caption for some of them.

http://matt.mw/passing_in_review3.html

I need to be able to center the last picture "with" the shadow in this layout, but am wondering how to do this. I managed to do it with two images (as you can see at the very top) using 2 divs within another div, but one image is really killing me with floating items.

Code:
.img-shadow {
float:left;
background: url(http://matt.mw/gmsaa/img_shadow/shadowAlpha.png) no-repeat bottom right;
margin: 10px;
}
.img-shadow img {
display: block;
background-color: #fafafa;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

<div class="img-shadow"><img src="http://matt.mw/gmsaa/articles/passing_in_review/passing_in_review_images-012.jpg" /></div>

So without taking away this float & shadow, how do I place this image in the exact center when this layout is not fixed? Obviously text-align:center has no effect on floating items. Seems different positioning methods like "absolute" ruin my shadow.

Please help me out! Thanks.
Reply With Quote
  #2 (permalink)  
Old 08-06-11, 03:43 PM
xEX3CUT1ONx xEX3CUT1ONx is offline
Wannabe Coder
 
Join Date: Jun 2008
Posts: 122
Thanks: 2
Thanked 0 Times in 0 Posts
Well why are you using an image for the shadow you could get the same effect using CSS then the floating wouldn't be an issue.
Reply With Quote
  #3 (permalink)  
Old 10-04-11, 12:23 PM
mpjstuff mpjstuff is offline
New Member
 
Join Date: Oct 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Post Centering in a page

I hope this isn't TOO late for you -- but I just joined the forum today.

I researched this issue of Centering, and I combined a few different solutions -- trying to distill the easiest and most comprehensive solution. The following was used to put a Flash presentation in a window, and to make the window as large as possible without "fullscreen" because Adobe Flash disables form input when in FullScreen mode. You could do this with only CSS and DIV -- but the Javascript was necessary for my project. So this maximizes a window, centers it and centers the flash file inside -- which can be rendered FOOBAR a lot more easily than simply centering an image.

Good Luck! You would think that Centering in a page would be a lot easier, but IE with it's Inner Window widths and such complicate this quite a bit -- so 100% of a screen must sometimes be discovered and written as an absolute value (depending on browser)....

I'm not yet sure about embedding HTML and code on this Forum, so I'll attach the file -- the CSS file comes first and would be "syles.css" that is linked to from the main web page.
Attached Files
File Type: txt browserWindowCenter_MJ.txt (5.2 KB, 10 views)
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Floating image over two div header? Nisin CSS 3 06-22-10 09:56 AM
Space Above Form xavier039 CSS 1 07-13-09 10:52 PM
[SOLVED] Floating Div Targets Lon Sobel JavaScript 1 06-10-08 11:44 AM
centering an absolutely positioned div? vbsaltydog CSS 8 11-19-06 01:17 PM
Centering Div dflies CSS 2 01-12-06 12:17 AM


All times are GMT -5. The time now is 04:46 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.