• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 182
  • Last Modified:

Css float issue

Hi all i am a webstie i am testing and trying to get his working
- i have three divs a menu at hte left a contents for hte middle and a bottom for the bottom info
- o there is also a container div for everything to go in to
in IE the middle will grow no issues if there is more contents but in crome and firefox  the next will go under the bottom div
how do i fix this

here is the code
****
CSS
****
body{}
.navigation {
  height:100%; width:auto; 
  color:blue;
  border-color:maroon; 
  border-style:solid; 
  border-width:1px; 
  float:left; 
  background-color:#4852B7
}

.content {
  height:80%; 
  width:50%; 
  border-color:none; 
  border-style:none; 
  border-width:0px; 
  float:left;
}
.bottom{
	height:20%;
	width:50%; 
	float:left;
	color:white;
	background-color:green
	}

a:link {
  color:white; 
  font-weight:bold;
}

.container{height:100%}

Open in new window

****
HTML
****

<html>
	<head>
		<Title> Test page </title>
		<link rel=stylesheet href="style.css" type="text/css">
	</head>
	
<div class="container">	
	
	
	
		<body>
			<Div class="container">
					<div class="navigation">
						<img src="image.jpg" height="176" width="163" alt="Happy Puppy Organic Dog food logo" border="0">
						<h2>Navigation</h2>
						<p><a href="">1st Menu item</a></p>
						<p><a href="">2nd Menu item</a></p>
						<p><a href="">3rd Menu item</a></p>
						<p><a href="">4th Menu item</a></p>
						<p><a href="">5th Menu item</a></p>
						<p><a href="">6th Menu item</a></p>
						<p><a href="">7th Menu item</a></p>
						<p> </p>
						<p> </p>
					</div>

					<div class="content">
						<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
					</div>
					
					<div class="bottom">
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br>/p>
					</div>
			</div>
</body>
</html>

Open in new window

0
awolarczuk
Asked:
awolarczuk
1 Solution
 
EyalCommented:
0
 
awolarczukAuthor Commented:
Eyal:
Thats niot the issue as it works ok in IE it is just FF and Crome that is the issue
0
 
SHOABCommented:
Dear use this code -

css
--------------------------
body{ font-family:Arial, Helvetica, sans-serif}
/*outer*/
.container{ width:1000px; border:1px solid #000; margin:auto; }
.clear{ clear:both}
/*navigation*/
.navigation {background-color:#4852B7;padding:10px;}
.navigation h2{font-size:20px;}
.navigation p{ float:left;border:1px solid #000; padding:5px; margin:2px;}
.navigation p a{ color:#fff; text-decoration:none}
.navigation p a:hover{ color:#fff; text-decoration:underline}
/*content*/
.content {border:1px solid #000;padding:10px;}
.bottom {border:1px solid #000; background:green;padding:10px;}
.bottom p{ float:left; border:1px solid #000; padding:5px; margin:2px;}
a:link {color:white; font-weight:bold;}

html
--------------------------
<div class="container">
<div class="navigation">
    <img src="image.jpg" height="176" width="163" alt="Happy Puppy Organic Dog food logo" border="0">
    <h2>Navigation</h2>
    <p><a href="">1st Menu item</a></p>
    <p><a href="">2nd Menu item</a></p>
    <p><a href="">3rd Menu item</a></p>
    <p><a href="">4th Menu item</a></p>
    <p><a href="">5th Menu item</a></p>
    <p><a href="">6th Menu item</a></p>
    <p><a href="">7th Menu item</a></p>
     <div class="clear"></div>
</div>

<div class="content">
    <h1>Page Title</h1>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br><br></p>
        <h1>Page Title</h1>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br><br></p>
        <h1>Page Title</h1>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br></p>
    <h2>Section Header</h2>
    <p>stuff about happy puppy<br><br><br></p>
</div>

<div class="bottom">
    <p>stuff about happy puppy</p>
    <p>stuff about happy puppy</p>
    <p>stuff about happy puppy</p>
    <div class="clear"></div>
</div>
<div class="clear"></div>
</div>

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
DanielleFavreauCommented:
SHOAB's code will work, but the clears inside bottom and navigation are not necessary.

You only need a clear before the closing container div, which basically says to the code, "After these three columns add an empty row to force my wrapper to wrap around the longest of the columns."
0
 
COBOLdinosaurCommented:
The page does not have a doctype so IE is in quirksmode and that probably why it works in IE.  There is a div between the end of the head and the start of the body.  That is invalid and I don't know what that does. width:auto does not need to be there on the body.  The content is restrained to 50% width and 80% height with no overflow specified, so when it fills up, it has no option except to drop down and gain addition width.

Adding overflow:scroll to the content might fix it be give an undesirable rendering with scroll bars.  Removing height from the content might solve it also.
0
 
awolarczukAuthor Commented:
COBOLdinosaur:
Thanks amte can you please tell me where i need to add theses

SHOAB:
Thanks for the code ill take a look very soon

DanielleFavreau:
Thanks so much for the feed back to it good to hear back from people
0
 
COBOLdinosaurCommented:
The doctype should be the first thing in the page. I use:
<!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>
	<title>test page</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

Open in new window


the extra div is here:
	</head>
	
<div class="container">	
	
	
	
		<body>

Open in new window


and I would change the content class to:
.content {
  height:80%; 
  width:50%; 
  overflow:scroll;
  border-color:none; 
  border-style:none; 
  border-width:0px; 
  float:left;
}

Open in new window

see if that is a solution.  If not we might want to get rid if the 80% height.
0
 
awolarczukAuthor Commented:
ok cool mate have done that the onlyt issue i have now is that the bottom doesnt line up with the content and the color from the menu nav area doesnt continue down with the text
0
 
awolarczukAuthor Commented:
code
body{}
.navigation {
  height:100%; width:auto; 
  color:blue;
  border-color:maroon; 
  border-style:solid; 
  border-width:1px; 
  float:left; 
  background-color:#4852B7
}

.content {
  height:80%; 
  width:50%; 
  border-color:none; 
  border-style:none; 
  border-width:0px; 
  float:left;
}
.bottom{
	height:20%;
	width:70%; 
	float:left;
	color:white;
	background-color:green
	
	}

a:link {
  color:white; 
  font-weight:bold;
}

.container{height:100%}

Open in new window

<!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>
		<Title> Test page </title>
		<link rel=stylesheet href="style.css" type="text/css">
	</head>
	
	
	
		<body>
			<Div class="container">
					<div class="navigation">
						<img src="image.jpg" height="176" width="163" alt="Happy Puppy Organic Dog food logo" border="0">
						<h2>Navigation</h2>
						<p><a href="">1st Menu item</a></p>
						<p><a href="">2nd Menu item</a></p>
						<p><a href="">3rd Menu item</a></p>
						<p><a href="">4th Menu item</a></p>
						<p><a href="">5th Menu item</a></p>
						<p><a href="">6th Menu item</a></p>
						<p><a href="">7th Menu item</a></p>
						<p> </p>
						<p> </p>
					</div>

					<div class="content">
						<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppys tuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppystuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
					</div>
					
					<div class="bottom">
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br></p>
					</div>
			</div>
</body>
</html>

Open in new window

0
 
COBOLdinosaurCommented:
I need to see what the page looks like.  Can you post the link?
0
 
COBOLdinosaurCommented:
Never mind the link I set up the code on my computer and I see the problem.  The blue does not extend down because there is not enough content.  The navigation will not get any larger than content.  The green is shifted over because the navigation does not come down far enough to block it.

In my earlier post I told you that you needed to add overflow:scroll, and it looks like you missed that. I also thought the 80% height might be a problem.  It is.

I cleaned up a little and this is how the code needs to be. No real change here:
<!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>
		<Title> Test page </title>
<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	
	
		<body>
			<div class="container">
					<div class="navigation">
						<img src="image.jpg" height="176" width="163" alt="Happy Puppy Organic Dog food logo" border="0">
						<h2>Navigation</h2>
						<p><a href="">1st Menu item</a></p>
						<p><a href="">2nd Menu item</a></p>
						<p><a href="">3rd Menu item</a></p>
						<p><a href="">4th Menu item</a></p>
						<p><a href="">5th Menu item</a></p>
						<p><a href="">6th Menu item</a></p>
						<p><a href="">7th Menu item</a></p>
						<p> </p>
						<p> </p>
					</div>

					<div class="content">
						<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppys tuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppystuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy stuff about happy puppy stuff about happy puppy stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
							<h1>Page Title</h1>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br></p>
						<h2>Section Header</h2>
						<p>stuff about happy puppy<br><br><br></p>
					</div>
					
					<div class="bottom">
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br></p>
						<p>stuff about happy puppy<br></p>
					</div>
			</div>
		</div>
</body>
</html>

Open in new window


 the stylesheet is changed:
.navigation {
  height:100%; width:auto; 
  color:blue;
  border-color:maroon; 
  border-style:solid; 
  border-width:1px; 
  float:left; 
  background-color:#4852B7
}

.content {
  height:380px;
  width:50%; 
   float:left;
   overflow-y:scroll;
}

.bottom{
	height:20%;
	width:70%; 
	float:left;
	color:white;
	background-color:green
	
	}

a:link {
  color:white; 
  font-weight:bold;
}

.container {height:100%;}

Open in new window


The content is now constrained and when it overflows you get a scroll bar.  Without the scrollbar you are not going to get the alignment you want unless content exactly fills the same height as the nav.
0
 
awolarczukAuthor Commented:
mate how do i do the 2nd option as this is what i really need i really i i can help it dont want a scrol bar
0
 
COBOLdinosaurCommented:
Okay mate here are the options for no scrollbar:

1

Add more stuff into the lleft section with the navigation so that it has an much height as the content.

2

Reduce the amount of content so that the height of the content area is not more than the navigation section

3

increase the width of the footer so tha it is equal to the widths of the navigation and content.

4

Create an image that is just a blue rectangle and add the image after the navigation as many times as necessary to extend the navigation down far enough
For all the steps you will need to remove the line overflow-y:scroll from the content class in the stylesheet.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now