music_lp90 Posted September 25, 2007 Share Posted September 25, 2007 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 comment Share on other sites More sharing options...
mistergalarza Posted September 25, 2007 Share Posted September 25, 2007 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 comment Share on other sites More sharing options...
BrotherBill Posted September 25, 2007 Share Posted September 25, 2007 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 comment Share on other sites More sharing options...
music_lp90 Posted September 25, 2007 Author Share Posted September 25, 2007 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 comment Share on other sites More sharing options...
music_lp90 Posted September 25, 2007 Author Share Posted September 25, 2007 Thanks, Bill for your reply. I was hoping maybe that there was a way to have it automatically fill in the space, though. Link to comment Share on other sites More sharing options...
BrotherBill Posted September 25, 2007 Share Posted September 25, 2007 Seems like there should be. I just haven't got that part figured out yet. Link to comment Share on other sites More sharing options...
mistergalarza Posted September 25, 2007 Share Posted September 25, 2007 Thanks man.The portfolio pieces are widely used for many portfolios - I use a script made in js called LightBox.http://www.huddletogether.com/projects/lightbox/You can get a copy there. Link to comment Share on other sites More sharing options...
music_lp90 Posted September 26, 2007 Author Share Posted September 26, 2007 Thanks for the link. I think I'm going to try that script out. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.