Jump to content

New to CSS layout


Recommended Posts

Hi all, I'm working on learning how to lay pages out with CSS instead of html tables. I'm having a bit of a hard time figuring our where things things will be positioned when I say something like float:left and how that is going to relate to other things on the page. So any general advice on understanding positioning would be appreciated, but my question for now is this:I have created a very ugly page just to work on positioning things. I put the page up at www.webtests.info. If you look at the yellow section that says "Type in some content here" how can I make that so that it's bottom is always even with the bottom of the green side bar.This is the html code:

<body><div id="contain">	<div id="masthead"><h2>This is the head</h2></div>		<div id="r_sidebar">		<div id="r_sidebar_title"><p>This is a title</p></div>		<div><ul><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul></div>		<div id="r_sidebar_title"><p>This is title #2</p></div>		<div><ul><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul></div>			</div>	<div id="nav"><a href="">This is Nav</a></div>	<div id="content"><p>Type in some content here.</p></div>	<div id="footer"><h3>Footer</h3></div></div></body>

this is the css:

/* CSS Document */#contain {	overflow: auto;}#masthead {	float:left;	height: 100px;	background-color: #FFCC66;	width: 100%;}#content {	float: left;	width: 75%;	background-color: #FFFF99;}#footer {	clear: both;	background-color:#FFCC66;	height: 80px;}#nav {	height: 30px;	background-color: #9999CC;	float: left;	width: 75%;}#r_sidebar {	float: right;	width: 25%;	background-color: #33CC99;}#r_sidebar_title {	background-color:#FF3366;	height: 20px;	width: inherit;}

Thanks for your help!

Link to post
Share on other sites
Hi all, I'm working on learning how to lay pages out with CSS instead of html tables. I'm having a bit of a hard time figuring our where things things will be positioned when I say something like float:left and how that is going to relate to other things on the page. So any general advice on understanding positioning would be appreciated, but my question for now is this:Thanks for your help!
float basically forces that element into the order of the page "flow"so if you have<div class header<div class body<div class footerall floated.. they would all fall in that same order. If you moved <div class footer above header then, obviously - the order would change.relative positioning, positions the element relevant to its original position. left:500px would add 500px to the left of it. This still follows page flow.absolute positioning removes that element from the order of flow, meaning you can use precise px's/coordinates to position an element over anything. It will not follow the order of the page flow so you could position this over anything.Simple?Hope its SOME help.
Link to post
Share on other sites
If you look at the yellow section that says "Type in some content here" how can I make that so that it's bottom is always even with the bottom of the green side bar.
The way it is set up, you could possibly add a "height" property with a value of 238px to the content selector.
#content {	float: left;         height: 238px;	width: 75%;	background-color: #FFFF99;}

Keep in mind, that if you change the size of your right sidebar, you may also have to change the value in your "height" property.I'm in the process of learning all of this myself, so someone out there may have a better idea.Bill

Link to post
Share on other sites

Thanks for the reply, Gabriel. That seems to make sense. I think I just need to spend more time messing around with it. I visited the link to your portfolio. I really liked it. I liked the way you brought up your portfolio pieces when the thumbnail is clicked. What did you do that with? Was it javascript?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...