Jump to content

centering a boxes inside a box

damiancds

By damiancds
in CSS

Recommended Posts

damiancds Member

damiancds

Posted
Posted

Okay,as it is now, i have something like this

          Section______________________________[] [] [] [] [] [] [][] [] [] []and i'd like it so it's centered           Section_______________________________      [] [] [] [] [] [] []           [] [] [] []

It's kind of complicated, because i have: inside the body is a main div (which centers all the content in the page, inside the main div, i have a sidebar and content divs, and inside the content div is the situation, i want a div, that holds the section title, an hr, maybe a paragraph then the boxes, centered.i have a demo of what i'm trying to do here .the blue box is what i wanted everything centered inside of, but i wanted the image boxes centered themselves so they're in another div. I'm only using temporary styles and once i get it all worked out, I was going to add them to the style sheet.chances are you'll need to know more, so just let me know what it is,thanks,

Link to comment
Share on other sites
damiancds Member

damiancds

Posted
  • Author
Posted

unfortunately, the text-align: center didn't work,my usual method is to set a width and then have a margin: auto; but that won't work here either, because i want this fluid ( i have a min and max width for all the content)

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

When a container is set to text-align:center, the elements it contains must be free to move around. Your gallery elements are not. They float. You have to remove the float property. But then your div elements won't align horizontally. So don't use div elements to contain your images. Spans might work. They might work better if you set each span to display:inline-block. (Setting a div or any other block-level element to inline-block will not work consistently in IE.)Note that you cannot center an element using the margin:0 auto trick when the element is floated. The trick also fails when you have multiple items on the same horizontal.

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
When a container is set to text-align:center, the elements it contains must be free to move around. Your gallery elements are not. They float. You have to remove the float property.
I believe I said that. :)
I can't visit your site so I'm not sure what you have. But I think you can just add text-align: center to the div that contains the images. The images can't be floating though or that won't work.
Link to comment
Share on other sites
damiancds Member

damiancds

Posted
  • Author
Posted

Yeah, sorry, wasn't really thinking there,HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Cow Pictures (12)</title><link rel="stylesheet" type="text/css" href="/resources/includes/css/style.css" ><LINK REL="SHORTCUT ICON" HREF="/resources/images/system/favicon.ico"><script language="JavaScript"type="text/javascript" src="/resources/includes/java/crumb.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="/resources/includes/java/scrolltotop.js">/************************************************ Scroll To Top Control script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Project Page at [url="http://www.dynamicdrive.com"]http://www.dynamicdrive.com[/url] for full source code***********************************************/</script><meta http-equiv="content-type" content="text/html;charset=UTF-8"><meta http-equiv="expires" value="Thu, 16 Mar 2000 11:00:00 GMT"><meta http-equiv="pragma" content="no-cache"><META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"></head><body><div class="main"><div class="header"><a name="top"> </a><a href="/index.php"><img class="banner" src="/resources/images/system/banner.jpg" alt="Ledge Rock Farm NY Inc. Logo"> </a>DROP DOWN MENU WENT HERE, JUST TRYING TO CUT DOWN ON COD</div><div class="sidebar"><!--sphider_noindex--><ul><li><a class="sidebar" href="/gallery/markets/">Markets</a><ul>	<li><a class="sidebar" href="/gallery/markets/82nd_street/">82<sup>nd</sup> Street</a></li>	<li><a class="sidebar" href="/gallery/markets/botanical_gardens/">Botanical Gardens</a></li>	<li><a class="sidebar" href="/gallery/markets/central_avenue/">Central Avenue</a></li>	<li><a class="sidebar" href="/gallery/markets/cortelyou/">Cortelyou</a></li>	<li><a class="sidebar" href="/gallery/markets/livingstonville/">Livingstonville</a></li>	<li><a class="sidebar" href="/gallery/markets/stuyvesant/">Stuyvesant Town</a></li>	<li><a class="sidebar" href="/gallery/markets/tucker_square/">Tucker Square</a></li>	<li><a class="sidebar" href="/gallery/markets/waterford/">Waterford</a></li></ul></li></ul><ul><li><a class="sidebar" href="/gallery/farm/">Farm</a><ul>	<li><a class="sidebar" href="/gallery/farm/animals/">Animals</a><ul><li><a class="sidebar" href="/gallery/farm/animals/cats/">Barn Cats</a></li><li><a class="sidebar" href="/gallery/farm/animals/cows/">Cows</a></li></ul></li>        <li><a class="sidebar" href="/gallery/farm/equipment/">Equipment</a><ul><li><a class="sidebar" href="/gallery/farm/equipment/freezer/">Freezer</a></li><li><a class="sidebar" href="/gallery/farm/equipment/wagon/">Hay Wagon</a></li></ul></li><li><a class="sidebar" href="/gallery/farm/house/">Farm House</a></li>        <li><a class="sidebar" href="/gallery/farm/pasture/">Pasture</a></li></ul></li></ul><ul><li>More<ul>	<li>Coming Soon ...</li></ul></li></ul><!--/sphider_noindex--></div><div class="content"><div style="border: 1px solid black; background-color: blue; width: auto; overflow:auto; text-align: center;"><div class="center">Cow Pictures<hr width="350" noshade></div><div style="margin: auto; width: auto; border: 2px solid white; overflow:auto; text-align: center; padding: 0px;">	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_001.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_001.jpg" alt="Cows -  1 of 12" title="Cows -  1 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_002.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_002.jpg" alt="Cows -  2 of 12" title="Cows -  2 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_003.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_003.jpg" alt="Cows -  3 of 12" title="Cows -  3 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_004.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_004.jpg" alt="Cows -  4 of 12" title="Cows -  4 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_005.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_005.jpg" alt="Cows -  5 of 12" title="Cows -  5 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_006.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_006.jpg" alt="Cows -  6 of 12" title="Cows -  6 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_007.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_007.jpg" alt="Cows -  7 of 12" title="Cows -  7 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_008.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_008.jpg" alt="Cows -  8 of 12" title="Cows -  8 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_009.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_009.jpg" alt="Cows -  9 of 12" title="Cows -  9 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_010.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_010.jpg" alt="Cows -  10 of 12" title="Cows -  10 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_011.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_011.jpg" alt="Cows -  11 of 12" title="Cows -  11 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div>	<div class="gallery_sm">	  <a href="/gallery/farm/animals/cows/cow_012.php">	  <img src="/resources/images/farm/animals/cows/sm/cow_012.jpg" alt="Cows -  12 of 12" title="Cows -  12 of 12">	  </a>	  <div class="description_sm">Cow Picture</div>	</div></div></div><br><div style="border: 1px solid black; background-color: red; overflow: auto;"><div class="center">Ledge Rock Farm Pasture Pictures<hr width="350" noshade></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_001.php">  <img src="/resources/images/farm/pasture/sm/pasture_001.jpg" alt="Pasture Picture - 1 of 6" title="Pasture Picture - 1 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_002.php">  <img src="/resources/images/farm/pasture/sm/pasture_002.jpg" alt="Pasture Picture - 2 of 6" title="Pasture Picture - 2 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_003.php">  <img src="/resources/images/farm/pasture/sm/pasture_003.jpg" alt="Pasture Picture - 3 of 6" title="Pasture Picture - 3 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_004.php">  <img src="/resources/images/farm/pasture/sm/pasture_004.jpg" alt="Pasture Picture - 4 of 6" title="Pasture Picture - 4 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_005.php">  <img src="/resources/images/farm/pasture/sm/pasture_005.jpg" alt="Pasture Picture - 5 of 6" title="Pasture Picture - 5 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div><div class="gallery_sm">  <a href="/gallery/farm/pasture/pasture_006.php">  <img src="/resources/images/farm/pasture/sm/pasture_006.jpg" alt="Pasture Picture - 6 of 6" title="Pasture Picture - 6 of 6">  </a>  <div class="description_sm">Pasture Picture</div></div></div><div class="gallery_sm_nav">	<hr width="50%">	<a href="/gallery/farm/animals/">Back to the Animal Section</a>	<hr width="50%"></div></div><br><!--sphider_noindex--><div class="footer"><br><div class="copyright"><hr class="footer" width="750"><h6>|<a class="copyright" href="/index.php" title="Navigate To Our Home Page.">Home</a> |<a class="copyright" href="/about/" title="Find Out More About Us.">About Us</a> |<a class="copyright" href="/contact/" title="View Our Contact Information.">Contact Us</a> |<a class="copyright" href="/news/index.php" title="Take A Look At Our Newsletter.">Newsletter</a> |<a class="copyright" href="/information/faq.php" title="Take A Look At Some Frequently Asked Questions.">Frequently Asked Questions</a> |<a class="copyright" href="/system/site_map.php" title="View An Outline Of Our Site With This Site Map.">Site Map</a> |<a class="copyright" href="/system/access.php" title="View Our Accessibility Information.">Accessibility</a> |<a class="copyright" href="/system/privacy.php" title="View Our Privacy Policy and Terms of Use.">Privacy Policy & Terms of Use</a> |</h6><hr class="footer" width="750"></div><a href="#top" title="Jump Back To The Top Of The Page.">Back to top</a><br><br><br></div><!--/sphider_noindex--></div></body></html>

CSS:

/* Ledge Rock Farm Style Sheet *//* BASIC STYLES */body {background-color: white;font-family: "bookman old style"; margin: 0px;margin-top: -5px;margin-bottom: -5px;padding: 0px;padding-left: 10px;padding-right: 10px;}div.all{background-color: #dddddd; /* set the color for the page*/height: 100%;margin: 0px;padding: 0px;background-image: url('/resources/images/system/backgrounds/back_001.jpg');background-attachment: fixed;}div.main{min-width: 780px;max-width: 1000px;border: 1px solid #000;margin: 5px auto;padding: 0px;background-color: #ffffee;}div.content{padding: 10px 10px 10px 230px; /*goes clockwise: top, right, bottom, left*/background-color: #ffffee;}img{border-style: none;}div.left{text-align: left;}div.center{text-align: center;}div.right{text-align: right;}div.justify{width: 200px;text-align: justify;}/* Ledge Rock Farm Sidebar Style */div.sidebar{float: left;width: 200px;height: 100%;background-color: #ccffcc; /*was 194812, test for bg really is ccffcc */border-color: black;border-width: 2px;color: black;padding: 7px;border: 1px solid #000;border-left: 0px;border-top: 0px;font:12px arial,sans-serif;}A.sidebar{color: 	black;text-decoration: none;}A.sidebar:link{color: black;}A.sidebar:visited{color: black;text-decoration: none;}A.sidebar:active{color: gray;text-decoration: none;}A.sidebar:hover{color: gray;text-decoration: none;}/* Image Gallery Styles */div.gallery_sm{  padding: 2px;  margin: 2px;  max-height: 500px;  width: auto;  float: left;  text-align: center;  border: 2px solid #666666;  background-color: #DDF6DA;}div.gallery_sm img{  display:inline;  margin: 0px;  border:1px solid #ffffff;  width: 160px;  height: 120px;}div.gallery_sm img.folder{height: 100px;width: 100px;border: none;}div.gallery_sm a:hover img{  border:1px solid #0000ff;}div.gallery_sm a:hover img.folder{  border: none;}div.description_sm{  text-align: center;  font-weight: normal;  width: 158px;  margin: 2px;  font: 13px arial, sans-serif;  min-height: 2em;  vertical-align: baseline;  background-color: white;  border: 1px solid;  line-height: 2em;}div.description_sm_folder{  text-align: center;  font-weight: normal;  width: 158px;  margin: 2px;  font: 13px arial, sans-serif;  min-height: 2em;  vertical-align: baseline;  background-color: white;  border: 1px solid;  line-height: 2em;}div.gallery_sm img{  border: 1px solid #ffffff;}div.gallery_sm img a:hover{  border: 2px solid #542385;}div.gallery_lg{  margin: 5px;  padding: 1px;  height: auto;  text-align: center;    border: 1px solid black;  background-color: #DDF6DA;}div.gallery_lg_title{  display: inline-block;  margin-top: -1px;  padding-left: 5px;  padding-right: 5px;  line-height: 1.5em;  text-align: center;  border: 1px solid black;  border-top: none;  background-color: white; }div.gallery_lg img{  border: 1px solid black;  display: inline;  margin: 3px;  margin-top: 6px;  margin-bottom: 6px;  width: 750px;}div.gallery_lg img.link{  border: 1px solid black;  padding: 3px;  background-color: #ffffee;  display: inline;  margin: 3px;  width: 120px;  height: 90px;  vertical-align: middle;}div.description_lg{  text-align: center;  font-weight: normal;  width: auto;  margin: 2px;  font: 14px arial,sans-serif;  height: 2em;  font-weight: normal;  background-color: white;  border: 1px solid;  line-height: 2em;}div.gallery_lg_nav{  text-align: center;  font: 15px arial,sans-serif;  margin: 5px;  padding: 5px;}div.gallery_lg_nav A{color: 	#006600;text-decoration: none;}div.gallery_lg_nav A:link{color: #006600;}div.gallery_lg_nav A:visited{color: #66cc66;text-decoration: none;}div.gallery_lg_nav A:active{color: #66cc66;text-decoration: none;}div.gallery_lg_nav A:hover{color: #66CC66;text-decoration: none;}div.gallery_sm_nav{  clear: both;  text-align: center;  font: 15px arial,sans-serif;  margin: 5px;  padding: 5px;}div.gallery_sm_nav A{color: 	#006600;text-decoration: none;}div.gallery_sm_nav A:link{color: #006600;}div.gallery_sm_nav A:visited{color: #006600;text-decoration: none;}div.gallery_sm_nav A:active{color: #006600;text-decoration: none;}div.gallery_sm_nav A:hover{color: #66CC66;text-decoration: none;}

I tried cutting out a lot of the crap that didn't really apply so it would be a little shorter.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...