3 Replies - 555 Views - Last Post: 03 February 2011 - 05:17 AM

#1 drouple  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 16-January 11

float:left help

Posted 01 February 2011 - 06:30 PM

HTML
<!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.

Is This A Good Question/Topic? 0
  • +

Replies To: float:left help

#2 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: float:left help

Posted 01 February 2011 - 07:24 PM

It's going under because #wrapper is not wide enough. If you increase the width of #wrapper to 910px it works great. Another option would be to remove the margins and padding for both elements.

Also, be sure you set #wrapper to
overflow:auto;
otherwise it will only be about 1px in height.

here is a great overview of some issues to watch for when using floats http://www.quirksmod...s/clearing.html

This post has been edited by ClearRift: 01 February 2011 - 07:27 PM

Was This Post Helpful? 1
  • +
  • -

#3 drouple  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 16-January 11

Re: float:left help

Posted 02 February 2011 - 10:11 PM

wow, brief yet an accurate answer. Thanks for the help, good bless you.
Was This Post Helpful? 0
  • +
  • -

#4 Glorfindal  Icon User is offline

  • Java Enthusiast
  • member icon

Reputation: 23
  • View blog
  • Posts: 538
  • Joined: 31-December 08

Re: float:left help

Posted 03 February 2011 - 05:17 AM

I know you are new here but it's helpful if you add [fixed] before the title of the topic. It just helps others out so that they know it has been solved and they don't have to take time to view and read the topic. Thanks. And welcome to Dream.In.Code. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1