hi all,
i am trying to create a products page without using tables
..
the page has the following elements..
#banner (750px wide 160px high).
#navigation (160px wide).
.product(555px wide 100px high).
#footer (750px wide).
.sidebar (160px wide).
the .sidebar is just a just a grey box to stop the left side under the navigation looking so empty.
i did think of using a grey backgorund for the navigation and setting the height to achive this but im using a nice background for the nav and dont want to lose it.
i have the following css:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
width:752px;
margin-right: auto;
}
#banner {
height: 160px;
width: 750px;
border:1px solid #000;
}
#navigation {
width: 159px;
float:left;
border-left:1px solid #000000;
clear: both;
height: 300px;
}
#footer {
width:750px;
clear:both;
border:1px solid #000;
}
.product {
width: 500px;
border: 1px solid #000000;
float: right;
height: 100px;
}
.sidebar {
background: #CCCCCC;
width: 159px;
height: 200px;
}
-->
</style>
the problem i have is getting the sidebar to sit under the nav in IE NS and MOZ..
can achieve it in ie but not NS and MOZ..
any ideas how i can use css to acheive this?
or any other suggestions.
thx andyAdd float: left; and clear: left; to your .sidebar class
that works fine in ie but no NE MOZ...
heres the full page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
width:752px;
margin-right: auto;
}
#banner {
height: 160px;
width: 750px;
border:1px solid #000;
}
#navigation {
width: 159px;
float:left;
clear: both;
height: 300px;
border: 1px solid #000;
}
#content {
width: 590px;
float:right;
border-right:1px solid #000;
border-left:1px solid #000;
background-color: #CCCCCC;
}
#footer {
width:750px;
clear:both;
border:1px solid #000;
}
.product {
width: 500px;
border: 2px solid #990000;
float: right;
height: 100px;
}
.sidebar {
background: #CCCCCC;
width: 159px;
height: 200px;
float: left;
clear: left;
}
-->
</style>
</head>
<body>
<div id="banner">
banner
</div>
<div id="navigation">navgation
</div>
<div class="sidebar">Content for class "sidebar" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div id="footer">
footer
</div>
</body>
</html>
in NS the products sit level with the sidebar instead of the nav.
andy
think ive found a solution.
nesting the sidebar div within the navigation div.
<body>
<div id="banner">
banner
</div>
<div id="navigation">navgation
<div class="sidebar">Content for class "sidebar" Goes Here</div>
</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div id="footer">
footer
</div>
</body>
andy
i am trying to create a products page without using tables
..the page has the following elements..
#banner (750px wide 160px high).
#navigation (160px wide).
.product(555px wide 100px high).
#footer (750px wide).
.sidebar (160px wide).
the .sidebar is just a just a grey box to stop the left side under the navigation looking so empty.
i did think of using a grey backgorund for the navigation and setting the height to achive this but im using a nice background for the nav and dont want to lose it.
i have the following css:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
width:752px;
margin-right: auto;
}
#banner {
height: 160px;
width: 750px;
border:1px solid #000;
}
#navigation {
width: 159px;
float:left;
border-left:1px solid #000000;
clear: both;
height: 300px;
}
#footer {
width:750px;
clear:both;
border:1px solid #000;
}
.product {
width: 500px;
border: 1px solid #000000;
float: right;
height: 100px;
}
.sidebar {
background: #CCCCCC;
width: 159px;
height: 200px;
}
-->
</style>
the problem i have is getting the sidebar to sit under the nav in IE NS and MOZ..
can achieve it in ie but not NS and MOZ..
any ideas how i can use css to acheive this?
or any other suggestions.
thx andyAdd float: left; and clear: left; to your .sidebar class
that works fine in ie but no NE MOZ...heres the full page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
width:752px;
margin-right: auto;
}
#banner {
height: 160px;
width: 750px;
border:1px solid #000;
}
#navigation {
width: 159px;
float:left;
clear: both;
height: 300px;
border: 1px solid #000;
}
#content {
width: 590px;
float:right;
border-right:1px solid #000;
border-left:1px solid #000;
background-color: #CCCCCC;
}
#footer {
width:750px;
clear:both;
border:1px solid #000;
}
.product {
width: 500px;
border: 2px solid #990000;
float: right;
height: 100px;
}
.sidebar {
background: #CCCCCC;
width: 159px;
height: 200px;
float: left;
clear: left;
}
-->
</style>
</head>
<body>
<div id="banner">
banner
</div>
<div id="navigation">navgation
</div>
<div class="sidebar">Content for class "sidebar" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div id="footer">
footer
</div>
</body>
</html>
in NS the products sit level with the sidebar instead of the nav.
andy
think ive found a solution.nesting the sidebar div within the navigation div.
<body>
<div id="banner">
banner
</div>
<div id="navigation">navgation
<div class="sidebar">Content for class "sidebar" Goes Here</div>
</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div class="product">Content for class "product" Goes Here</div>
<div id="footer">
footer
</div>
</body>
andy