What would be the better solution to use: float or absolute positioning? I made a site using absolute positioning with my DIV's, but it only works in 1280x768 and better. And Ive had problems with the float property before.
So, which one should I use and how do more precisely position the DIV's using float?
(also, I'd like to know the difference between inline and block elements, I haven't found what the diff. is)A block level element means it sits on its own line as inline elements have no carriage return. A paragragh is an example of a block level element and span is a inline element.
What do you mean more precisly position with floats use the margin attribute, also what problems did you have with floats.When I wanted to have some text float to the right of a table cell, it gave me a return. But I don't use tables anymore so maybe it'll work.
By more precise, I mean, if I want to have some text float to the left, some text in the middle, and some text to the right, what would I do? how would I specify that I want the block element there.Hi -
As I understand it:
• block-level elements won't occupy the same line unless tweaked by css margins or positioning.
• inline elements will start at the top and left of their parent/container, and keep going on the same line 'til out of room, then repeat the process.
◊ when you float:left; the elem. goes as far to the top & left as it can - so you could repeat that float for elements to sort of 'stack' horizontally from the left.
◊ if a div is floated left, given a certain width, then the next div made to float:right, they should do so - although size and margins may need fixing, for sure.
◊ be sure to give any content or div to go under these elements a clear:both; so that it won't try to cram into them.
◊ also use clear: to keep any other floats from wrapping on the side of the first floated elem. that you want to keep clear [left or right or both].
Yes, I could be wrong, but it might help you to get started!
ElIm working on the sidebar for my site.. and Im trying to get the sidebar to occupy the same amount of space that the content area occupies... but I can't get the % or px to to work on both 800x600 and 1024x768(and better).
For 800x600, my sidebar (which has 2 div's inside it, itself) needs some 1700px to measure up. For 1024x768, I need 1500px to make the content section and sidebar section equal.
Gah!
(ps, I can't get the top the content to move down a few pixels either to even out.. grr..
)
(ps2, I also can't reduce the white space between paragraphs and the space between the bottom of the last paragraph and the bottom of the content box -- Ive adjusted margins and padding.. nothing works.)Since this is the WebDeveloper Forums and not the Psychic Friends Network, a URL would be nice.<!-- m --><a class="postlink" href="http://www.freewebs.com/testsite_01">http://www.freewebs.com/testsite_01</a><!-- m --> ... though Im working on it on notepad..Well I'd start out with a little something like this.
#sidebar {
float:left;
height:1500px;
width:20%;
}
#content {
width:80%;
margin-left:20%;
}
Then I'd use some reasonable markup for the content, including HEADINGS where headings are needed.there's a big extra space on the right now.
this what Ive done..
#sidebar{
float:left;
height:1499px;
width:15%
}
#content{
width:85%;
display:inline;
margin-left:5px;
}
The sections within the content and sidebar are set to 100 percent width... and yet it doesn't occupy the rest of the screen. when I set the content to float:right; theres a huge space between the sidebar and content.. and the height issue is still a problem.I'm going to recommend you spend some time rummaging around A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->), especially the Faux Columns and Negative Margins articles.Didn't help and the Faux columns really has nothing to do with what Im doing... what I don't understand is that if I set both the content and sidebar to be 1500px high, they're not equal in height.
Hi -
Your left sidebar looks pretty nice so far - are you trying to get the main content to float alongside of it?
One thing that's helped me is to set an actual width for body{ - then to make sure that the content 'measures up' to that amt. Like, the sidebar's XXpx wide and content's XXXpx to total= body width.
If the content's too wide to either float left, also - or go opposite and tweak with margin-setting...something's gotta give.
[sidenote: this text color is just for layout purposes only, yes? ;-)]
Keep at it, it'll get there,
ElIm also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)Originally posted by alman9898
Im also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)Well that's exactly what the faux columns article was for
, did you even read it?
And the negative margins article explained how to get your columns to line up. Since you didn't seem to pay any attention to the article even though you were beaten round the head with it, here's a layout based on it.I don't need to make a background image since I only want it to run down a certain amount.
Also, it's hard to follow a tutorial when you already have a layout and lots of markup already on your page.
So, which one should I use and how do more precisely position the DIV's using float?
(also, I'd like to know the difference between inline and block elements, I haven't found what the diff. is)A block level element means it sits on its own line as inline elements have no carriage return. A paragragh is an example of a block level element and span is a inline element.
What do you mean more precisly position with floats use the margin attribute, also what problems did you have with floats.When I wanted to have some text float to the right of a table cell, it gave me a return. But I don't use tables anymore so maybe it'll work.
By more precise, I mean, if I want to have some text float to the left, some text in the middle, and some text to the right, what would I do? how would I specify that I want the block element there.Hi -
As I understand it:
• block-level elements won't occupy the same line unless tweaked by css margins or positioning.
• inline elements will start at the top and left of their parent/container, and keep going on the same line 'til out of room, then repeat the process.
◊ when you float:left; the elem. goes as far to the top & left as it can - so you could repeat that float for elements to sort of 'stack' horizontally from the left.
◊ if a div is floated left, given a certain width, then the next div made to float:right, they should do so - although size and margins may need fixing, for sure.
◊ be sure to give any content or div to go under these elements a clear:both; so that it won't try to cram into them.
◊ also use clear: to keep any other floats from wrapping on the side of the first floated elem. that you want to keep clear [left or right or both].
Yes, I could be wrong, but it might help you to get started!
ElIm working on the sidebar for my site.. and Im trying to get the sidebar to occupy the same amount of space that the content area occupies... but I can't get the % or px to to work on both 800x600 and 1024x768(and better).
For 800x600, my sidebar (which has 2 div's inside it, itself) needs some 1700px to measure up. For 1024x768, I need 1500px to make the content section and sidebar section equal.
Gah!
(ps, I can't get the top the content to move down a few pixels either to even out.. grr..
)(ps2, I also can't reduce the white space between paragraphs and the space between the bottom of the last paragraph and the bottom of the content box -- Ive adjusted margins and padding.. nothing works.)Since this is the WebDeveloper Forums and not the Psychic Friends Network, a URL would be nice.<!-- m --><a class="postlink" href="http://www.freewebs.com/testsite_01">http://www.freewebs.com/testsite_01</a><!-- m --> ... though Im working on it on notepad..Well I'd start out with a little something like this.
#sidebar {
float:left;
height:1500px;
width:20%;
}
#content {
width:80%;
margin-left:20%;
}
Then I'd use some reasonable markup for the content, including HEADINGS where headings are needed.there's a big extra space on the right now.
this what Ive done..
#sidebar{
float:left;
height:1499px;
width:15%
}
#content{
width:85%;
display:inline;
margin-left:5px;
}
The sections within the content and sidebar are set to 100 percent width... and yet it doesn't occupy the rest of the screen. when I set the content to float:right; theres a huge space between the sidebar and content.. and the height issue is still a problem.I'm going to recommend you spend some time rummaging around A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->), especially the Faux Columns and Negative Margins articles.Didn't help and the Faux columns really has nothing to do with what Im doing... what I don't understand is that if I set both the content and sidebar to be 1500px high, they're not equal in height.
Hi -Your left sidebar looks pretty nice so far - are you trying to get the main content to float alongside of it?
One thing that's helped me is to set an actual width for body{ - then to make sure that the content 'measures up' to that amt. Like, the sidebar's XXpx wide and content's XXXpx to total= body width.
If the content's too wide to either float left, also - or go opposite and tweak with margin-setting...something's gotta give.
[sidenote: this text color is just for layout purposes only, yes? ;-)]
Keep at it, it'll get there,
ElIm also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)Originally posted by alman9898
Im also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)Well that's exactly what the faux columns article was for
, did you even read it?And the negative margins article explained how to get your columns to line up. Since you didn't seem to pay any attention to the article even though you were beaten round the head with it, here's a layout based on it.I don't need to make a background image since I only want it to run down a certain amount.
Also, it's hard to follow a tutorial when you already have a layout and lots of markup already on your page.