New Topic/Question
Reply
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="Ocean gems" />
<meta name="description" content="Hawaii's Precious and Rare Ocean Gems" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hawaii's Precious and Rare Ocean Gems</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageView.js"></script>
<script type="text/javascript">
$(function() {
$('#imageView_container').imageView({width: 146, height:195});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="#">Kahelelani Gems</a></div>
<div id="title">Hawaii's Precious and Rare Ocean Gems</div>
</div>
<div id="vmenu">
<div id="vmenuheader"></div>
<ul id="vul">
<li><a href="#">Necklace</a></li>
<li><a href="#">Earrings</a></li>
<li><a href="#">Bracelet/Anklets</a></li>
<li><a href="#">View all</a></li>
</ul>
<div id="bestitem">
<div id="itemheader">Best item</div>
<div id="imageView_container">
<img id="imageView" src="images/item 4 small.jpg" rel="images/item 4 large.jpg" title="Hawaiian Niihau Kahelelani shell necklace 14k gold hook" alt=""/>
</div>
</div>
<div id="vmenubottomspacer"></div>
</div>
<div id="body"></div>
</div>
</body>
</html>
CSS
/*Kahelelani CSS by Juliver A. Galleto*/
body
{
padding:0;
}
/*wrapper start*/
#wrapper
{
height:auto;
width:900px;
border:1px solid gray;
margin-bottom:auto;
}
/*header start*/
#logo a
{
font-family:"Impact", Verdana, Times New Roman, Arial;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#3399FF;
}
#logo a:hover
{
color:black;
}
#title
{
margin-left:20px;
font-family:"Times New Roman", Arial, Tahoma;
font-style:italic;
padding:0px;
font-size:20px;
position:relative;
}
/*header end*/
/*vmenu start*/
#vmenu
{
float:left;
width:200px;
height:auto;
border:1px solid gray;
background:#99CCFF;
}
/*body start*/
#body
{
width:700px;
height:650px;
background:#99CCFF;
float:left;
}
/*body end*/
#vmenuheader
{
height:30px;
background:#3399FF;
clear:both;
}
#vul
{
list-style:none;
padding:0;
}
#vul li
{
text-align:left;
padding:0 5px 0;
}
#vul a
{
font-family:"Georgia";
display:block;
font-size:18px;
font-weight:bold;
color:black;
text-decoration:none;
padding:5px;
line-height: 25px;
border-bottom: 1px solid gray;
font-style:italic
}
#vul a:hover
{
background:#3399FF;
color:white;
border-bottom: 0;
}
#bestitem
{
text-align:center;
width:180px;
height:autopx;
border:1px solid #3399FF;
margin:120px auto auto;
}
#itemheader
{
font-family: "Georgia", Arial, Verdana, Times New Roman;
font-size:18px;
font-weight:normal;
background:#3399FF;
}
a img
{
border:none;
}
#imageView_container
{
width:auto;
height:auto;
padding:0px;
margin:10px auto;
}
#imageView_container.iv-loading
{
border: 2px solid #f00;
}
#vmenubottomspacer
{
height:8px;
}
/*vmenu end*/
/*wrapper end*/
I was expecting the <div id="body"> element to be horizontally aligned next to the <div id="vmenu"> element as i set it to float:left but what was happen is, it goes below <div id="vmenu"> and it goes outside <div id="wrapper"> like it was set to position:absolute and it should not be like that because at the first place, I set it to float:left and why it should goes outside the <div id="wrapper"> element to the fact that it is inside the <div id="wrapper"> element. Hope I can find a specific answer here, since i am a beginner in CSS please consider the way i code and i always understand the flow of my coding as far as what i understand in CSS but just this one, i dont know what might be the problem about those. Thanks and more power to dreamincode.net.
Seeking for informative explanation,
Drouple.
MultiQuote
| 