PDA

Click to See Complete Forum and Search --> : floating 4 inline divs

changintimes
02-27-2007, 11:29 AM
well i tried for hours, but i can not figure out how to float these divs, navigation, and 3 watch divs,

how do i get these divs to center with an expanding and contracting browser ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type="text/css">
@import url('watch%20gallery%20layers.css');
h1 {
font-family: haettenschweiler;
color: red;
text-align: center;
font-size: 20px;
margin-top: 0;
margin-bottom: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
color: #fff;
}
a:link {
color: #ffffff;
margin-top: 0px;
}
a:visited {
color: #ffff00;
}
#watch_gallery {
margin-left: 1px;
margin-right: 1px;
padding-left: 1px;
padding-right: 1px;
width: auto;
}
img {
border-width: 0px;
background-color: #FFFFFF;
}
#navigation {
float: left;
width: 110px;
padding: 1px;
z-index: 3;
display: inline;
}
#navigation_2 {
position: relative;
width: 100px;
height: 100px;
z-index: 5;
top: 450px;
left: 0px;
text-align: center;
line-height: 24px;
float: left;
}
#container {
width: auto;
border: 1px solid red;
z-index: 1;
display: inline;
margin-left: 10px;
margin-right: 10px;
float: left;
padding-right: 1px;
}
#gallery_container_left {
width: 160px;
height: 327px;
margin: 1px;
z-index: 7;
text-align: center;
display: inline;
float: left;
}
#gallery_container_center {
width: 160px;
height: 327px;
margin: 0 auto;
z-index: 7;
text-align: center;
float: left;
display: inline;
}
#gallery_container_right {
width: 160px;
height: 327px;
margin: 1px 1px 1px auto;
z-index: 7;
float: left;
text-align: center;
display: inline;
}
.image_div {
border: 7px solid #E80000;
width: 120px;
height: 212px;
z-index: 12;
text-align: center;
background-color: #FFFFFF;
margin: 25px 5px 0px 5px;
display: block;
}
.watch_image {
margin-top: 10px;
background-color: #FFFFFF;
z-index: 15;
}
.price {
font-family: Arial;
font-size: 10pt;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
display: block;
}
.description {
font-family: Arial;
font-size: 10pt;
font-weight: bold;
margin-top: 10px;
margin-bottom: 0px;
height: 32px;
display: block;
}
</style>
<title>Seiko Watches Ladies at Wrist Watch World</title>
</head>

<body>

<div id="watch_gallery">
<div id="navigation">
navigation to be added</div>
<div id="gallery_container_left" class="gallery_container">
<div class="image_div">
<a href="watches/seiko/SUJ629.htm">
<img alt="seiko watch 1" src="watches/seiko/SUJ629--5.jpg" class="watch_image" /></a></div>
<p class="description"><a href="watches/seiko/SUJ629.htm">Seiko Lady's<br />
Silver Tone Watch</a></p>
<p class="price">SUJ629&nbsp;&nbsp;&nbsp; $87.50 </p>
</div>
<div class="gallery_container" id="gallery_container_center">
<div class="image_div">
<a href="watches/seiko/SXG768.htm">
<img alt="seiko watch 2" src="watches/seiko/SXG768--5.jpg" width="60" height="183" class="watch_image" /></a></div>
<p class="description"><a href="watches/seiko/SXG768.htm">Seiko Lady's<br />
Gold Tone Watch</a> </p>
<p class="price">SXG768&nbsp;&nbsp;&nbsp; $95.00 </p>
</div>
<div id="gallery_container_right" class="gallery_container">
<div class="image_div">
<a href="watches/seiko/SXGB70.htm">
<img alt="seiko watch 3" src="watches/seiko/SXGB70--5.jpg" width="67" height="183" class="watch_image" /></a></div>
<p class="description"><a href="watches/seiko/SXGB70.htm">Seiko Lady's<br />
Gold Tone Watch</a> </p>
<p class="price">SXGB70&nbsp;&nbsp;&nbsp; $88.00 </p>
</div>
</div>

</body>

</html>
ray326
02-27-2007, 12:43 PM
Wrap them in a container with a fixed width using margin:0 auto.
changintimes
02-27-2007, 01:48 PM
works very good, but i thought there might be a way that i could make the divs expand and contract horizontally ???
ray326
02-27-2007, 09:21 PM
Size and position them in percentages? But if the container doesn't force some minimum width (which IE won't understand) then things can't survive when the browser gets insanely narrow.
changintimes
02-27-2007, 11:27 PM
ofcourse, thanks ray, you can see i'm new,