21 replies [Last post]
dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

Ok, to start off here are 2 screenshots of the site I am creating and the problem I am having.

http://img517.imageshack.us/img517/1285/blacklineks2.jpg

http://www.ekornmeyer.com/productsss.jpg

My problem is that the black bar on the very left of the page does not go all the way down the page. As you can see, it stops short on both pages.

My whole layout is divs with absolute positioning on them. Here is the HTML code for the div in question:

< div class="leftsidebar">< /div>

And the CSS styles for it:

.leftsidebar {
	background-color: #231f20;
	height: 100%;
	width: 26px;
	float: left;
	position: absolute;
	z-index: 2;
	overflow: visible;
	}

I have tried setting the body tag and the html tag to height: 100% but that didn't work. I have tried putting the left side bar div into a container div set to height: 100% but that didn't work either.

Right now I have the < div class="leftsidebar">< /div> set on its own, not contained in anything.

Any help? :/

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I guess the absolutely

I guess the absolutely positioned content is higher than the browser window height?

Height:100% on <html> applies to the browser window height. Anything that requires vertical scrolling will be beyond 100%. Position:absolute is a very poor primary layout tool (it is also pointless to use float with position:absolute).

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

So there is no way to have

So there is no way to have it scale with the content if it is positioned absolutely?

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

You're wrong that it's

You're wrong that it's pointless to use float with absolute positioning. It's working for me and my layout breaks if I take it out.

I am now 99% sure this is a floating issue though. I added a 1px red boarder around the container div as seen here:

You can see here that the black bar actually does run all the way down, but that certain content is going past it.

Anyone have any idea on how to fix this?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 19 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

dutchM wrote:You're wrong

dutchM wrote:
You're wrong that it's pointless to use float with absolute positioning. It's working for me and my layout breaks if I take it out.

This is terrible logic. You mean you can't do it without absolute positioning. That you can't do it that way doesn't mean that it is the correct way to do it or that no one else can do it. There is nothing about that layout that should require any absolute positioning.

Quote:
Anyone have any idea on how to fix this?

A good start might be to lose the attitude and be willing to listen to and learn from others...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

lol? Why would I redo this

lol? Why would I redo this whole layout because someone suggested it can be done another way.

This is what works for me and I am on a deadline.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Bloke driving a car. Winds

Bloke driving a car. Winds down window to speak to local 'How do I get to Bloggsville?'

'That's it over there,' the local points across the river.

'Great, where's the bridge?'

'There isn't one.'

'Well, how do I get there?'

'You need to drive 100 miles east to catch a ferry and a hundred miles back.'

'I need to get there within the next half an hour, I can't afford to go back.'

'Swim then.'

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

Wow, this forum is retarded.

Wow, this forum is retarded.

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

GG, I fixed it noobs.

GG, I fixed it noobs.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Wow, I go to sleep and all

Wow, I go to sleep and all of a sudden this thread deteriorates. :?

dutchM.

My original reference to floating and position absolute referred to your use of both in the one style rule. Position absolute will overide the floating making it irrelevant.

Good luck if you have fixed it. Look about the net and see how many other similar sites are done using position:absolute. I doubt you'll find many, its just too flakey. E.g. up the font size of your browser a couple of clicks and see what happens. Coping with variations like that are much easier for in-flow elements.

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

What would a in-flow element

What would a in-flow element be compared to using position: absolute

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Absolute position will take

Absolute position will take the element out the flow.

The web page will normally have one element after the other as they are placed in yourt code. That is natural flow.

So, if you position an element absolutely, as the others expand or move due to browser window changes or font-size changes (both out of your control), those placed normally will move but the absolute ones may well not, causing chaos.

Those coders that DO use absolute position (which includes me) use it with extreme caution.

Unfortunately, a lot of WYSIWYG editors use it as a matter of course.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

For major layout elements

For major layout elements that need to appear side by side I will use float. When a float is properly contained or cleared following elements will automatically appear in the correct place. Techniques like faux columns or equal height columns can then be used to ensure your background decorations show correctly.

As ClevaTreva says, use position:absolute with care. I use it only when I can guarantee the space will be available to the element. That means I only use it for images that have location requirements which can't be achieved otherwise. The spacing is normally guaranteed by margin or padding on in flow elements. You can do this with images because they (normally) have a fixed pixel size. Text size is unpredictable and can be varied by the user so its best not to assume to much about it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 57 min 23 sec ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Sidenote: These screen

Sidenote:

These screen shots are far too large and should be compressed or preferably removed!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dutchM
Offline
newbie
Last seen: 7 years 17 weeks ago
Joined: 2007-06-12
Posts: 10
Points: 0

I took off the hot linking

I took off the hot linking on the first 2 images for you, can't seem to get the other one further down.

Alright, I understand now. But I'm not the one that actually designed this site, I'm just responsible for putting it together. I bring this up because the designer told me very specific things to do with this design. IE, having the text break a certain way in certain elements.

So but really what I meant was... would using relative positioning be better? I mean would that allow the divs to expand if text were enlarged through the browser? I know that it's relative to the browser window so if they shrink the browser the layout will follow along with it. Maybe you could help me out with specific tags that go good with fluid layouts like you are talking about.

Would it require a brand new start over of the layout? Or is it relatively easy to switch these things out?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Designers are a problem like

Designers are a problem like that. You'll just have to make do, try to educate the designer and make sure whomever knows the sites failings aren't down to you but the designer.

Its not position:absolute or position:relative. The default value for position is static, that's what you get if you don't mention position at all in your styles. Static is in flow and is good enough for most things. You shouldn't need to change any tags, just style them appropriately.

Easy/hard depends on the html, your familiarity with it and your skill level.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 10 weeks 5 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

dutchM wrote:GG, I fixed it

dutchM wrote:
GG, I fixed it noobs.

This is not a counter-strike server, please talk properly!

(p.s. for those who don't play GG = good game)

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Thought he was a member of

Thought he was a member of the Girl Guides. Shows what I know.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

And I thought it was "gotta

And I thought it was "gotta go" :shrug:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 57 min 23 sec ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Gin Guzzlers

Gin Guzzlers :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 39 weeks 4 hours ago
Bournemouth
Joined: 2007-05-31
Posts: 692
Points: 43

Hmmm, I'm definitely more of

Hmmm, I'm definitely more of a Gin Guzzler then a Girl Guide, so I like Hugo's suggestion.

Is a 'noob' a sort of short way of saying 'newbie'?

Have YOU said Hello yet?
The CSSCreator Hello Thread

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 10 weeks 5 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

No. Newbie = someone new to

No.

Newbie = someone new to something.

Noob = an idiot.

Newbie's behaviour can be excused because they are new to something and are willing and able to learn.

Noobs are people who persistently do stupid things, and even when shown the correct way to do it throw that away and revert to their original stupid way of doing things.

Verschwindende wrote:
  • CSS doesn't make pies