Jump to content

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

silverglade

By silverglade
in CSS Help

Recommended Posts

silverglade Advanced Member

silverglade

Posted
Posted

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 Advanced Member

silverglade

Posted
  • Author
Posted

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 Advanced Member

silverglade

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.