Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

POSITION: beginer confusion

Status
Not open for further replies.
SteveDingle

SteveDingle

Programmer
Jul 26, 2004
254
GB
Heya All,

I am "trying" to learn CSS, reading throught Eric Meyer's books and I have to admit total confusion POSITION.

I am trying to get awy from using Tables for layout and want to work out using DIV and POSITION: but I'm having a toatl brain fart and I'm totaly lost with the whats/whens of the different values (STATIC, ABSOLUTE etc..)

The goal of the code below is the have the #Header NEXT TO #Logo filling up the rest of the document all the way to the right

I found myself mixing matching, STATIC, ABSOLUTE and realised I was just guessing so thought it best to ask.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
</head>
<style type="text/css">

body {position: relative; 
		background: yellow; 
		margin: 0; 
		padding: 0;
}
#pagetop {
   margin: 0;
	padding: 0;
	border: thin solid lime;
	background: lime;
	position: static;
	top: 0;
	left: 0;
	width: 100%;
	height: 118px;
}
#pagemiddle {
   margin: 0;
	padding: 0;
	border: thin solid lime;
	background: blue;
	color: white;
	position: relative;
	width: 100%;
	height: 100%;
}
#pagebottom {
   margin: 0;
	padding: 0;
	border: thin solid lime;
	background: green;
	color: white;
	position: absolute;
   bottom: 0;
	width: 100%;
	height: 20px;
}
#logo { 
	display: inline;
	margin: 0;
	padding: 0;
	border: thin solid black;
	background: white;
	position: static;
	top: 0;
	left: 0;
	bottom: 0;
	width:  141px;
	height: 100%;
}
#heading {
	display: inline;
   margin: 0;
	padding: 0;
	border: thin solid black;
	background: white;
	position: static;
	top: 0;
	bottom: 0;
	right: 0;
	left: 142px;
	height: 100%;
}

</style>

<body>

<div id="pagetop">

	<div id="logo">
	Logo
	</div>

	<div id="heading">
	Heading
	</div>
	
</div>

<div id="pagemiddle">
Middle
</div>

<div id="pagebottom">
Bottom
</div>

</body>
</html>

Thanks!!!

Toodles,
Steve Dingle
D&S Business Solutions Ltd
 
Sort by date Sort by votes
Heya All,

Just responding to myself here, after spending more time trolling around the web I can see that I really am lost in this stuff and guilty of a fundamental ignorance when it comes to CSS... even after reading Eric's book :)

So what I'd like to do is ask a more fundamental questions. Which I'll ask here first.

1) Can I use DIV and POSITION to create a 3 column layout where the center columns WIDTH adjust itself according to the user resizing the browser window (easily done using tables)

2) Can I have a DIV setting "fill" in space regardless of content. For instance, my middle column, with a BACKGROUND-COLOR is always the full length of web page and the WIDTH is always the full distance between "column" 1 and 3 (again simple using tables)

If anyone can point me to some sort of tutorial in use DIV instead of TABLE I would greatly apprecaite it

Thanks a lot and sorry for my ignorance.

Toodles,
Steve Dingle
D&S Business Solutions Ltd
 
Upvote 0 Downvote
Just gone through this myself!!
there are loads of 3 column layout tutorials

this is an okish way to do it

Code: 
<style type="text/css">
<!--
#left{
width:33%;
float:left;
background:#f00;
padding-bottom:10px;
}
#middle{
width:34%;
float:left;
background:#f0f;
padding-bottom:10px;

}
#right{
width:33%;
float:left;
background:#ff0;
padding-bottom:10px;

}
-->
</style>
</head>

<body>

  <div id="left"> 
    <p>leftleftleftleftleftleftleftleftleftleftleftl</p>
    <p>eftleftleftleftleftleftleftleftleftleftleftleft</p>
    </div>
  <div id="middle"> 
    <p>middlemiddlemiddlemiddlemiddlemiddle</p>
    <p>middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</p>
    </div>
  <div id="right"asdfasdf> 
    <p>rightrightrightrightrightrightrightrightr</p>
    <p>ightrightrightrightrightrightrigh</p>
    <p>trightrightrightrightrightrightrightrightrightrightrig</p>
    <p>htrightrightrightrightrightrightrightright</p>
    </div>
</div>
 
Upvote 0 Downvote
Heya guitardave78

Thanks for the code.. I see you're using FLOAT as opposed to POSITION which looks like it'll get me where I want to go for the width, but it seem the height is based on content. Is there any way to get the DIV to always flow the entire page... and just to make is more complicated ;-)... assuming I have header and footer stuff. Basically the "layout" I'm hoping for is...
Code: 
-----------------------------
 LOGO   | HEADER CONTENT
-----------------------------
        |             |
NAV COL |   CONTENT   | MISC stuff
        |             | 
        |             |
-----------------------------
        FOOTER CONTENT
-----------------------------
With the NAV, CONTENT and MISC columns always being the full length down to the FOOTER, regardless of content. The CONTENT should change with user resizing.

thanks

Toodles,
Steve Dingle
D&S Business Solutions Ltd
 
Upvote 0 Downvote
lol go to is that what you are looking for?

it uses some tables though

Or look at my post called 100% div height
I had the exact same problem. Look to teh last couple of posts and you will see a css/javascript solution :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Blueie
  • Locked
  • Question
Menu position
Replies
3
Views
119
Blueie
Blueie
IPGuru
  • Locked
  • Question
Label position on Checkbox
Replies
5
Views
468
IPGuru
IPGuru
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
156
vacunita
vacunita
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
114
ChrisHirst
ChrisHirst
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
189
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top