Can anyone shed some light...Using the float property to align 3 images and 3 text boxes alongside each other inside a DIv. Everything looks fine in design/code view, however if I switch to live view or preview in browser, the images and text all align vertically underneath each other. Please Help!
Hi Murray,
Ha, Sorry I am new to Dreamweaver, you must get time wasters like me all the time!
I'd love to show you the code, I just don't know how to make it available to you and cant find an answer on the FAQ. I havent uploaded the site to a domain yet, although I do have a template website being hosted that I plan to replace with my dreamweaver site when it's complete.
Do you mean something like this:
<http://www.mytechnet.x10.mx/marko117.html>
If not then you will need to post your code here otherwise we'll just be guessing what you are thinking about.
G/L
Hi Murray and Mytaxsite,
Not sure if this is adequate, but here is a copy of the CSS code for the page:
@charset "UTF-8";
/* CSS Document */
#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#banner {
margin-bottom: 0;
}
#TTW_menu {
overflow: hidden;
position: relative;
}
#main_image {
overflow: hidden;
background-repeat: no-repeat;
position: relative;
height: 500px;
width: 968px;
background-color: #CCC;
}
#08pic_img {
background-color: #FFF;
position: relative;
padding-top: 20px;
}
#08_text {
width: 190px;
text-align: center;
line-height: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #000;
position: relative;
font-size: 14px;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
padding-top: 50px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
}
#09pic_img {
background-color: #FFF;
position: relative;
padding-top: 20px;
}
#09_text {
width: 190px;
text-align: center;
line-height: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #000;
position: relative;
font-size: 14px;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
padding-top: 50px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
}
#10pic_img {
background-color: #FFF;
position: relative;
padding-top: 20px;
}
#10_text {
width: 190px;
text-align: center;
line-height: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #000;
position: relative;
font-size: 14px;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
padding-top: 50px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
}
#08pic_img, #08_text, #09pic_img, #09_text, #10pic_img, #10_text {
float: left;
}
#08_text, #09pic_img, #09_text, #10pic_img, #10_text {
margin-left: 5px;
}
Thanks for your help
Okay, thanks...I really appreciate your help with this. It has had me stumped for a long time.
<!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-Type" content="text/html; charset=UTF-8" />
<title>thicker than water</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/TTW_menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#container h1 {
position: absolute;
top: -500px;
}
</style>
<link href="styles/our_wines.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>THICKER THAN WATER</h1>
<div id="banner"><img src="images/banner2.jpg" width="968" height="65" alt="thicker than water" /></div>
<ul id="TTW_menu" class="MenuBarHorizontal">
<li><img src="images/ourstory.jpg" width="134" height="101" alt="our_story" /><a href="our_story.html" class="MenuBarHorizontal">OUR STORY</a></li>
<li><img src="images/Globe.JPG" width="134" height="101" alt="our_wine" /><a href="our_wine.html">OUR WINE</a></li>
<li><img src="images/our_fruit.jpg" width="134" height="101" alt="our_fruit" /><a href="our_fruit.html">OUR FRUIT</a></li>
<li><img src="images/buy_online.jpg" width="134" height="101" alt="buy_online" /><a href="buy_online.html">BUY ONLINE</a></li>
<li><img src="images/our_details.jpg" width="134" height="101" alt="our_details" /><a href="our_details.html">OUR DETAILS</a></li>
<li><img src="images/our_gallery.jpg" width="134" height="101" alt="our_gallery" /><a href="our_gallery.html">OUR GALLERY</a></li>
<li><img src="images/our_kudos.jpg" width="134" height="101" alt="our_kudos" /><a href="our_kudos.html">OUR KUDOS</a></li>
</ul>
<div id="main_image">
<div id="08pic_img"><img src="Bottle shots/2008 TTW Shiraz.jpg" width="100" height="400" alt="08pic" /></div>
<div id="08_text">Thicker than Waters' very first wine, a 2008 shiraz was a half tonne crush of bunch selected, handpicked fruit carefully crushed and fermented in quarter tonne batches, before being basket pressed and sent to barrel. There, it received ongoing complexity and balnce over three years in a brand new french oak hogshead. Vanilla oak lifts overlapped with hints of coffee and tobacco, raisins, cassis and chocolate. Creamy and seamlessly balanced, quite simply this wine drinks like silk. Drinks older than it's age, either now or age until 2028. ONLY 350 BOTTLES PRODUCED!</div>
<div id="09pic_img"><img src="Bottle shots/2008 TTW Shiraz.jpg" width="100" height="400" alt="08pic" /></div>
<div id="09_text">In the spirit of producing a stylistically different wine, our 2009 Shiraz-Grenache has had its elegance shaped from a cool co-fermentation Shiraz and a small addition of whole bunch dry grown grenache. Again, bunch selection, handpicked fruit carefully crushed and fermented in quarter tonne batches, before being basket pressed and sent to barrel. A combination of new American and French oak for two years, this wine is drinking very well now but will be enhanced by cellaring up until 2028. Pungently warm with grippy tannins and full of licorice, blackberry and coffee notes. ONLY 250 BOTTLES PRODUCED!</div>
<div id="10pic_img"><img src="Bottle shots/2010 TTW Shiraz.jpg" width="100" height="400" alt="10pic" /></div>
<div id="10_text">Thicker than Waters' third wine and perhaps our most unique, the 2010 straight Shiraz was made from a 5 day pre-fermentation cold soak followed by a 10 day wild yeast ferment before traditional basket pressing and 16 months in both French and American oak. A rich satin smoothness featuring great balance, concentration and persistent length. Cassis, rasperry, spicy peppers and subtle earthy undertones from the wild yeast dominate. Drinking superbly for such a young wine, we can hardly contain our excitement about how it's going to age. ONLY 250 BOTTLES PRODUCED!</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("TTW_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The W3C validator (http://validator.w3.org) gives me 9 errors with your HTML - all of them relate to the fact that you cannot begin an ID attribute's value with a number, e.g., <div id="08pic_img">. Try making all of these like this -
<div id="pic_img08">
See if that change helps.
North America
Europe, Middle East and Africa
Asia Pacific