Float or absolute positioning?

@alman9898Jul 13.2004

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 1280×768 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)

to post a comment

CSS

14 Comments(s) _↴

@johndoe190Jul 13.2004 — #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.

@alman9898authorJul 14.2004 — #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.

@LJKJul 14.2004 — #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.

&loz; 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.

&loz; 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.

&loz; 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.

&loz; 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!

El

@alman9898authorJul 14.2004 — #Im 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..:mad: )

(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.)

@ray326Jul 14.2004 — #Since this is the WebDeveloper Forums and not the Psychic Friends Network, a URL would be nice.

@alman9898authorJul 14.2004 — #http://www.freewebs.com/testsite_01 ... though Im working on it on notepad..

@ray326Jul 14.2004 — #Well I'd start out with a little something like this.

<i>
 </i>#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.

@alman9898authorJul 14.2004 — #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;

}
[/quote]

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.

@ray326Jul 15.2004 — #I'm going to recommend you spend some time rummaging around [URL=http://www.alistapart.com]A List Apart[/URL], especially the Faux Columns and Negative Margins articles.

@alman9898authorJul 15.2004 — #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.? :mad:

@LJKJul 17.2004 — #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,

El

@alman9898authorJul 17.2004 — #Im also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)

@David_HarrisonJul 18.2004 — #[i]Originally posted by alman9898 [/i]

[B]Im also trying to make the sidebar height the same as the content's height for all users (800x600, 1024x768, 1280x1024, etc.)[/B][/QUOTE]Well that's [i]exactly[/i] what the faux columns article was for :rolleyes:, 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.

[upl-file uuid=dd7a5e32-1b47-4a80-9c8a-291d94b76d63 size=1kB]layout3.zip[/upl-file]

@alman9898authorJul 25.2004 — #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.

Also in #CSS _↴

A Margin and a z-index Question Pure CSS drop downs Image border in Internet Explorer

Success!

Help @alman9898 spread the word by sharing this article on Twitter...

Tweet This

Float or absolute positioning?

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Float or absolute positioning?

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴