[SOLVED] my floated left #left_content div is jumping below and outside outer div

silverglade · April 1, 2009

hi, my #left_content is popping out of #content_wrapper for some reason. it floats left out of #content_wrapper and below it .any help greatly appreciated. thank you. derek

here is the page im talking about.

http://derekvanderven.com/jewel_gallery/home.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
height: 0;
}

#wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 863px;
background-image: url(home/background.jpg);
 background-repeat:repeat-x;
}



#header {
margin: 0 auto 0 auto;
width: 801px;
height: 100px;
background-image: url(home/header.jpg);
 background-repeat:no-repeat;
 }

#content_wrapper {
margin: 0 auto 0 auto;
width: 801px;
height: 863px;
}

#left_content{
float: left;
height:703px;
width: 400px;
background-color: black;
background-image: url(home/vertical_jewels.jpg);
 background-repeat:no-repeat;
 background-position: right top;
 text-align: left;
 padding-left: 15px;


}

# navigation_div {
margin: 0 auto 0 auto;
width: 801px;
height: 30px;

} 	 

/***********************css navigation code*****************/ 
ul#navigation
{
font-size:.9em;
font-family: "Courier New";
margin: auto;
padding-left: 60px;
list-style-type: none;

color: #FFF;	 
width: 100%;
}	

ul#navigation li
{
display: inline;
}

ul#navigation a
{
float: left;
margin: 0 auto;
display:block;
padding: .2em 2em;
text-decoration:none;
color: #fff; /* text color*/
background: #A06710; /* background color */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;	
}

ul#navigation a:hover
{
color: #995522; /* hover text */
background: black; /* background color may be transparent value*/
border-color: #aaab9c #fff #fff #ccc;
} 

/*********************END CSS NAVIGATION CODE ********************/

and here is the html

<!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" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>

<title>Jewel Gallery</title>
</head>

<body>

<div id="wrapper">
      <div id="content_wrapper">
    	<div id="header">
        </div>
        <div id="navigation_div">
        <ul id="navigation">
	<li><a href="home.html">Home</a></li>
	<li><a href="about.html">Education</a></li>
	<li><a href="services.html">Ask The Experts</a></li>

	<li><a href= "archive.html">Archive</a></li>
	<li><a href="contact.html">Contact Us</a></li>

	</ul> </div><!--end navigation-->
    	</div><!--end navigation_div-->
          <div id="left_content">          </div> 
      <!--end leftcontent-->
</div><!--end contentwrapper-->
        
        </div> <!--end wrapper div-->
</body>
</html>

silverglade · April 1, 2009

ok i got it to work by repositioning the div order in code. does anyone know why this worked. ok i got it to work by repositioning the div order in code. does anyone know why this worked. because i sure dont.got rid of the navigation div around ulnavigation.

here is the new html

<!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" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>

<title>Jewel Gallery</title>
</head>

<body>

<div id="wrapper">
       
    	
        <div id="content_wrapper">
        <div id="header">
        </div>
        <ul id="navigation">
	<li><a href="home.html">Home</a></li>
	<li><a href="about.html">Education</a></li>
	<li><a href="services.html">Ask The Experts</a></li>

	<li><a href= "archive.html">Archive</a></li>
	<li><a href="contact.html">Contact Us</a></li>


    	
        <div id="left_content"></div>
        
         </div><!--end navigation div-->
         
         </div><!--end contentwrapper-->
        </div> <!--end wrapper div-->
</body>
</html>

silverglade · April 1, 2009

well i got it fixed now, my wrapper was too small for my rightcontent and rightnav padding. and i added orange to an a:hover for my nav links.

here is the finished page.

http://derekvanderven.com/jewel_gallery/home.html

Sign In

[SOLVED] my floated left #left_content div is jumping below and outside outer div

Recommended Posts

silverglade

Link to comment

Share on other sites

silverglade

Link to comment

Share on other sites

silverglade

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information