Positioning

my #bodycontent is left 200px, but it is overlapping eith #navigation which is width 180px, what is wrong with my css.


/*
CSS for Reacheasy site
*/
    body,html {
     margin: 0;
}
 
#page {
     width: 1060px;
     margin: 0 auto;
     position: relative
     /* is the same as: 
     margin-top: 0;
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
 */
}

body{
    border:1px solid white;
}

h1{
     font-size: xx-large;
       color: white;
       padding-top: 2em;
       padding-bottom: .2em;
       padding-left: .4em;
       margin: 0;
     background: url(header.jpg) repeat-y right;
}
ul#nav {
        height: 2em;
        list-style: none;
        margin: 0;
        padding-top: .2em;
        paddng-bottom: .2em
    width: 100%;
    background: url(tabs.gif);
}

ul#nav li {
        background: #bdf url(tabs.gif);
        float: left;
        margin: 0 1px 0 0;
        padding-left: 10px;
}

ul#nav a {
        background: url(tabs.gif) 100% 0;
        color: #008;
        display: block;
        float: left;
        height: 2em;
        line-height: 2em;
        padding-right: 10px;
        text-decoration: none;
}

ul#nav li.current {
        background-color: #48f;
        background-position: 0 -60px;
}

ul#nav li.current a {
        background-position: 100% -60px;
        color: #fff;
        font-weight: bold;
}
[B][COLOR=Red]#navigation {
  width: 180px;
  height: 475px;
  background:#7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}[/COLOR][/B]

#header{
    border:1px solid blue;
    width:100%;
    margin-top:-50px solid #fff;
}

html, body {
        height:100%;
        margin:0;
        padding:0;
}
#outer {
          width:1060px;
        margin:auto;
        min-height:100%;
        margin-top:-50px;
}

* html #outer{height:100%}

#footer {
     width:1060px;
     clear:both;
     height:50px;
     border-top:1px solid #000;
    background-color: #fff;
     border-bottom:1px solid #000;
     color: #000000;
     text-align:center;
     margin:0 auto;
}
/*
positioning
*/


#navigation, #bodycontent, #header {
 position: absolute;
}

#navigation, #bodycontent {
 top: 95px;
}

[B]#bodycontent {
left:200px;[/B]
}

#header {
width: 100%;
}

You realy have to be more specific In what you want an post the complete code meaning CSS and html. Having said this. You should use tags to add your code here on the forum. That makes things way easier to read. You’ll find it next to all other tools in the text editor

html below


<!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>Reacheasy - Foremost website for easy reach of things globally</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="reasy.css" rel="stylesheet" type="text/css"/>  
</head>
  <body>
<div id="outer">
<div id="page">
<div id="header">
<h1>Reacheasy</h1>
  <ul id="nav">
    <li class="current"><a href="rindex.html">Home</a></li>
     <li><a href="women.html">Women</a></li>
     <li><a href="men.html">Men</a></li>
     <li><a href="children.html">Children</a></li>
     <li><a href="furniture.html">Furniture</a></li>
     <li><a href="vision&sound.html">Vision&Sounds</a></li>
      <li><a href="cars.html">Cars</a></li>
      <li><a href="mobile.html">Mobile</a></li>
      <li><a href="school.html">School</a></li>
  </ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">
  <ul>
    <li><a href="left.html">offer</a></li>
     <li><a href="left2.html">free</a></li>
  </ul>
</div> <!--end of navigation div -->
<div id="bodycontent">
<p>To find out more, contact Club Secretay ade on 07932002660
   or <a
href="mailto:ade@reacheasy.co.uk">email
  [email]ade@reacheasy.co.uk[/email]</a>.</p>
</div>
</div>
</div>
<div id="footer">
<p>contact</p>
</div>
</body>
</html>

css below


/*
CSS for Reacheasy site
*/
	body,html {
 	margin: 0;
}
 
#page {
 	width: 1060px;
 	margin: 0 auto;
 	position: relative
 	/* is the same as: 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: auto;
 	margin-right: auto;
 */
}

body{
	border:1px solid white;
}

h1{
 	font-size: xx-large;
   	color: white;
   	padding-top: 2em;
   	padding-bottom: .2em;
   	padding-left: .4em;
   	margin: 0;
 	background: url(header.jpg) repeat-y right;
}
ul#nav {
    	height: 2em;
    	list-style: none;
    	margin: 0;
    	padding-top: .2em;
    	paddng-bottom: .2em
	width: 100%;
	background: url(tabs.gif);
}

ul#nav li {
    	background: #bdf url(tabs.gif);
    	float: left;
    	margin: 0 1px 0 0;
    	padding-left: 10px;
}

ul#nav a {
    	background: url(tabs.gif) 100% 0;
    	color: #008;
    	display: block;
    	float: left;
    	height: 2em;
    	line-height: 2em;
    	padding-right: 10px;
    	text-decoration: none;
}

ul#nav li.current {
    	background-color: #48f;
    	background-position: 0 -60px;
}

ul#nav li.current a {
    	background-position: 100% -60px;
    	color: #fff;
    	font-weight: bold;
}
#navigation {
  width: 180px;
  height: 475px;
  background:#7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}

#header{
	border:1px solid blue;
	width:100%;
	margin-top:-50px solid #fff;
}

html, body {
    	height:100%;
    	margin:0;
    	padding:0;
}
#outer {
      	width:1060px;
    	margin:auto;
    	min-height:100%;
    	margin-top:-50px;
}

* html #outer{height:100%}

#footer {
 	width:1060px;
 	clear:both;
 	height:50px;
 	border-top:1px solid #000;
	background-color: #fff;
 	border-bottom:1px solid #000;
 	color: #000000;
 	text-align:center;
 	margin:0 auto;
}
/*
positioning
*/


#navigation, #bodycontent, #header {
 position: absolute;
}

#navigation, #bodycontent {
 top: 95px;
}

#bodycontent {
left:200px;
}

#header {
width: 100%;
}

You should get rid of all those positioned elements, I.E. (left: 95px; top 100px etc;) Why not float your elements? I think your best option would be to make a screenshot or mockup in photoshop of what you want, than maybe someone can point you in the right direction because I have the feeling that you just add margins until it looks right, without understanding what is going on. I also have the feeling that you are changing your idea by the minute. I remember someone posting a floating layout in answer to one of your questions.

thanks i will go and read more on floating, will be back

Good idea :wink: That makes things much easier for yourself

ive been out with flu, having gone thru floating and positioning, what i found was that floating deals with moving left or right but with abs positioning you go top and left.
so decided to use abs positioning
what i notice was tht my navigation with a width of 180px still overlaps with my body content when moved left at 200px, what could be happening

Do you have a link to the site?

no still on my system

And that’s your problem :slight_smile:

You were given advice not to use absolute positioning and use floats instead but you went and absolutely placed it anyway :slight_smile:

When you want horizontal blocks of fluid content you should use floats and then remember to clear them underneath to regain the flow. Absolute elements on the other hand are removed from the flow and you cannot get under them to place elements such as a footer or make them avoid other content.

Most structural layout is done with static positioning and floats. Absolute positioning is used in small doses in controlled areas and confined to that area by using position:relative on the parent so that the absolute child is placed in relation to the parent and not the viewport.

I think you were trying a sticky footer approach like this.


<!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>Reacheasy - Foremost website for easy reach of things globally</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="reasy.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid blue;
    border-right:1px solid blue;
}
* html #outer {
    height:100%
}
h1 {
    font-size: xx-large;
    color: white;
    padding: 2em 0 .2em .4em;
    margin: 0;
    background: url(header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background: url(tabs.gif);
}
ul#nav li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}
ul#nav a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}
ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#navigation {
    width: 180px;
    min-height: 475px;
    background:#7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    float:left;
}
#bodycontent {
    float:right;
    width:880px;
    background:blue;
}
#header {
    width:100%;
    border-top:52px solid #fff;
    border-bottom:1px solid blue;
}
#footer {
    width:1060px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    background-color: #fff;
    border-bottom:1px solid #000;
    color: #000000;
    text-align:center;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="outer">
    <div id="page">
        <div id="header">
            <h1>Reacheasy</h1>
            <ul id="nav">
                <li class="current"><a href="rindex.html">Home</a></li>
                <li><a href="women.html">Women</a></li>
                <li><a href="men.html">Men</a></li>
                <li><a href="children.html">Children</a></li>
                <li><a href="furniture.html">Furniture</a></li>
                <li><a href="vision&sound.html">Vision&Sounds</a></li>
                <li><a href="cars.html">Cars</a></li>
                <li><a href="mobile.html">Mobile</a></li>
                <li><a href="school.html">School</a></li>
            </ul>
        </div>
        <!--end of navigation div -->
    </div>
    <div id="navigation">
        <ul>
            <li><a href="left.html">offer</a></li>
            <li><a href="left2.html">free</a></li>
        </ul>
    </div>
    <!--end of navigation div -->
    <div id="bodycontent">
        <p>To find out more, contact Club Secretay ade on 07932002660
            or <a
href="mailto:ade@reacheasy.co.uk">email
            [email]ade@reacheasy.co.uk[/email]</a>.</p>
    </div>
</div>
<div id="footer">
    <p>contact</p>
</div>
</body>
</html>


If you were looking for a full height left navigation column then you should do that with a fixed with image repeated on the y-axis of #outer. (You’d just cover it up with a background element in places where you don’t want to see it such as the header.)

paul u got it, can u give me a link to read more, cos as u know am new, i need more knowledge

You can find some tutorials on floats here.:slight_smile:

http://css.maxdesign.com.au/floatutorial/

The sticky footer is covered in the CSS faq (see link in my sig to faq) but is an advanced subject.

thanks the two links where very informative.
ive been able to create my 2 column layout to move ahead will i be able to create a bdy type like that of very.co.uk, or asdas using just css and html,

With practice yes :slight_smile:

The very site uses a lot of floats and is pretty straight forward stuff. Get yourself Firebug for Firefox and then you can inspect the html/CSS and learn how things are placed.

the bug has been cool, the site uses promo banners with links, and ive used it succesfully,
but with my two dimensional layout, as my banners increase the body content outgrows the navigation, i removed the min height that was set but it didnt change the pro, also chaned it to 100% no change as well


/*
CSS for Reacheasy site
*/
	body,html {
 	margin: 0;
}
 
#page {
 	width: 1060px;
 	margin: 0 auto;
 	position: relative
 	/* is the same as: 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: auto;
 	margin-right: auto;
 */
}

/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
background: url("aurora.jpg");
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid blue;
    border-right:1px solid blue;
}
* html #outer {
    height:100%
}
h1 {
    font-size: xx-large;
    color: white;
    padding: 2em 0 .2em .4em;
    margin: 0;
    background: url(header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background: url(tabs.gif);
}
ul#nav li {
    background: pink url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}
ul#nav a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}
ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#navigation {
    width: 180px;
   min-height: 475px;
    background:#7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    float:left;
}
#bodycontent {
    float:right;
    width:880px;
    background:black;
}
#header {
    width:100%;
    border-top:52px solid #fff;
    border-bottom:1px solid blue;
}
#footer {
    width:1060px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    background-color:black;
    border-bottom:1px solid #000;
    color: white;
    text-align:center;
    margin:0 auto;
    
}

#bannercontainer{
       width: 800px;
       height: 400px;
       padding: 0;
       margin-left: auto;
       margin-right: auto;
       background: #eee;
       border: 1px solid #000;
    }

    #bannercontainer a{
       display: block;
       width: 800px;
       height: 400px;
       padding: 0;
            background:#eee url(ade.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:link,a:visited{
       background:#eee url(ade.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:hover{
       background:#eee url(ade.jpg) 400px 0 no-repeat;
    }
#promo-banners{
  width:860px;
}
.promo-banner{
   border: medium none;
   display:block;
   float: left;
   padding: 0 19px 5px 0;
   width: 230px;
}
.promo-seo{
color:hbdbdbd;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
test align:left!important;
width:218px;
}
.promo-seo-link{
color:hbdbdbd;
text decoration:underline;
}
.promo-seo-link:visited{
color:hbdbdbd;
}

I explained in my previous post that if you want a full length column you should do it with a background image on the parent and not use height or min-height on the left blue column because css doesn’t work like that.

If you were looking for a full height left navigation column then you should do that with a fixed width image repeated on the y-axis of #outer. (You’d just cover it up with a background element in places where you don’t want to see it such as the header.)

See here for more info on the “faux column” approach.

thanks .

If you have a go and then get stuck then post back here and we’ll try to help :slight_smile: