Newbie - needs help with posistioning

hoponhiggo · June 9, 2011

Hi Guys

Im trying to get the layout of my page correct with css but i can seem to figure it out:

I have attatched an image of what im trying to acheive:

Here is the code i have so far:

css

#left
{
margin-left:1.5%;
width:20%;
height:auto;
margin-right:1.5%;
background-color:#F00;
position:absolute;
z-index:1;	
}
#middle
{
margin-left:2%;
width:50%;
height:auto;
margin-right:2%;
background-color:#00F;
position:absolute;
right:23%;
z-index:2;
}
#right
{
margin-left:1.5%;
width:20%;
height:auto;
margin-right:1.5%;
background-color:#0F0;
position:absolute;
z-index:3;
}

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" />
<title>Untitled Document</title>
<link href="file:///C|/Users/Hoponhiggo/Desktop/test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="left">test</div>
<div id="middle">test</div>
<div id="right">test</div>
</body>
</html>

This isnt working tho. It is just placing the divs on top of each other and not side by side/

Where am i going wrong?

[attachment deleted by admin]

cssfreakie · June 9, 2011

I can help you adjust this code, but you directly learn a bad practise which is doing things more difficult than needed.

For such a basic layout (and in fact most layouts are) you only need the property Float and the property clear.

A great tutorial on that can be found here. http://css.maxdesign.com.au/floatutorial/

ones you made some code with float and clear i am happy to help you because doing this with a position of absolute, is absolutely not right.

hoponhiggo · June 10, 2011

cssfreakie,

Thanks for your advice.

I have read the tutorial, followed it and tried to apply it to my page. But i am now experiencing new problems!

When i place something in #leftnav

it is appearing up to the right?

I think the problem might be coming from the fact that i have two style sheets attached.

The first sheet is my new page layout:

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

#container
{
width: 90%;
margin: 10px auto;
background-color:#333;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;

}

#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 100px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 100px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 140px;
border-left: 1px solid gray;
margin-right: 140px;
border-right: 1px solid gray;
padding: 1em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

The second sheet is applied to a wall posting script i am using:

/*  
Wall Script
*/

*
{
margin:0px;
padding:0px;
}
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; background-color:#333;
}
h3,h4
{
padding:0px;
margin:0px;
}
a
{
color:#000;
text-decoration:none;
}
#wall_container
{
text-align:left;
background-color:#FFFFFF;
padding:10px;
width:550px;
margin:auto;
margin-top:50px;
left: 507px;
top: 173px;


}
#update
{
width:550px;font-size:12px;
}
#content
{
margin-top:10px;
}
textarea
{
border:solid 1px #333;
}

/* status body */

.stbody
{

margin-bottom:10px;
border-bottom:dashed 1px #dedede;
overflow:auto;
}
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:3px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-size:12px;
width:470px;
}
.sttext b
{
color:#F00;
}

.sttime
{
font-size:11px;
color:#999;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
}
.stdelete 
{
font-weight:bold;
float:right;
cursor:pointer;
}
#stexpandbox
{
margin-top:10px;
}
#stexpandbox img
{
border:solid 1px #dedede;
padding:3px;
}
/* Comment */
.stcommentbody
{


border-bottom:solid 1px #fff;
background-color:#f2f2f2;
padding:5px;
width:400px;
overflow:auto;
}
.stcommentimg
{
float:left;
height:35px;
width:35px;
border:solid 1px #dedede;
padding:3px;
}
.stcommenttext
{
margin-left:45px;
min-height:40px;
word-wrap:break-word;
overflow:hidden;
padding:3px;
display:block;
font-size:11px;
width:350px;

}
.stcommenttext b
{
color:#006699;
}

.stcommenttime
{
font-size:11px;
color:#999;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
}
.stcommentdelete 
{
font-weight:bold;
float:right;
cursor:pointer;
}
.commentupdate
{
background-color:#f2f2f2;
width:400px;
padding:5px;
}
.comment
{
width:330px;
height:35px;
font-size:11px;
}
/* faceb image*/
.small_face
{
width:35px;height:35px
}
.big_face
{
width:50px;height:50px
}
#flashmessage
{
height:15px;
margin-top:10px;
font-size:11px;
color:#333;

}

can u see any conflicts between the two sheets? Can they even effect each other?

cssfreakie · June 11, 2011

When learning new things it's often better to try out that knowledge in a clean environment. So start with a clean slate. (and don't think what you made is worth keeping or that it's a waste if you ditch it ) Soon you can write this out of the top of your head.

Lets look at your image. you have a header and than 3 divs below it that sit next to each other. If you just tried out the float property on a clean slate you would have noticed that float is needed to let block elements sit next to each other and clear is to kick other object of that line.

try out the following and look at the logic in it.

<!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="cssa/style.css" /> <!-- i used stuff in style tags, but always use an external stylesheet -->
        <title>floatstuff</title>
<style type="text/css">
#wrapper{ /* a container to target everything at ones */
    width:966px;
    margin:0 auto; /* center page */
    border: 1px solid #eee;
    overflow:auto; /* shrinkwrap around everything */
    text-align: center;
}
#header{
    width:962px;
    height: 80px;
    clear:both; /* do you understand why we use clear here? is it really needed here? and what if the header was smaller in width?*/
    border: 2px solid yellow;
}
#left, #middle, #right{ /* makes 966px */
    width:310px; /* makes 930px */
    margin:4px; /* so that makes 24px .... You understand why? */
    border: 2px solid yellow; /* makes 12px */
    float:left; /* using just float left keeps things more organized than mizing up float left and right */
}
</style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">header</div>
            <div id="left">left</div>
            <div id="middle">middle</div>
            <div id="right">right</div>
        </div>
    </body>
</html>

P.s. although you said you read the tutorial which is a huge with loads of examples. I recommend you read and test it for real. Understanding the float property takes time.

Sign In

Newbie - needs help with posistioning

Recommended Posts

hoponhiggo

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

hoponhiggo

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information