Quick CSS Question

Monroe

Monroe

Member
Sorry for all the questions lately, but you guys are such a helpful bunch :D

I'm using a three-column CSS layout with a vertical navigation on each side, and the main content in the middle. The main content is much longer than the two navigation columns, so I would like the two nav columns to be fixed, so that they stay on the screen as you scroll down the middle (main content) column.

At the moment I have all three columns floating to the left, and it looks fine. But when I try to fix either nav column my whole layout gets screwed, because it fixes the nav and then shifts the middle column to the left underneath it. And if I fix the third column it moves it to the left on top of the first column.

Not sure if I made it clear what I'm trying to do, but if so, how do I do it? :)
 
Yeah this is what I'm referring to:

The Inspired Designer

I know it looks hideous, but the colors are temporary lol. The only links that work at the moment are The Inspired Designer and Web Development. When you click on Web Development does the size of the layout change on your computer? Because it does on mine and I'm not sure why yet.

Edit: Nevermind about that last question, the page was just being moved over a bit because of the scroll bar being added to the right *smacks forehead*)

Still not sure how to keep the two outside columns fixed while scrolling the middle column though.
 
Just had a very quick look at the code. You're missing a clear underneath your floats.

You need to do it like this..

<div id="column-left"></div>
<div id="column-right"></div>
<div class="clear"></div>

(or <br class="clear" />)

Then you need to specify that class in your CSS of course. So .clear {clear:both;}

Might not fix your specific issue (Sorry at work so can't look through your code properly) but you need to clear floats anyways or you will run into problems.

HTH!

:)
 
Do I put <div class="clear"></div> after each div that floats? In this case I should have a total of three clears?

Edit: I'm guessing I interpreted your post wrong, because now my three divs are all on the left stacked on top of one another lol.
 
Hehe. No not after each float. You need to clear after your last floated item where you want a new row of elements underneath. Crap explanation sorry :)

Let's say you've got 3 columns inside a wrapper. Then you can do it like this.

<div id="content">
<div id="column-left"></div>
<div id="column-middle"></div>
<div id="column-right"></div>
<div class="clear" />
</div>

Then you can add new elements under the clear if you want and they will be independent of your first 3 columns. So you could float them as well if you like but they wont jump up to the right of the right hand column if that makes sense?

I think there are probably other (and better) methods of doing this with less markup but you'll have to speak to Mr.CSS (Harry) about that. :)
 
Ah ok I see exactly what you mean now. What I'm not sure of is how to make this work for what I'm trying to accomplish. Let me write up real quick how my layout looks:

<body>
<div id="container">
<div id="leftbar"></div>
<div id="maincontent"></div>
<div id="rightbar"></div>
</div> <--- End of container, also where I should put the clear I presume?
<div id=footer"></div>
</body>

Now what I want is "leftbar" to be fixed on the left, and stay in one spot as you scroll down the page.

Then I want "maincontent" in the middle, not necessarily fixed, but always in between the two sidebars.

Then I want "rightbar" to be fixed on the right side of the container, and stay in one spot as you scroll down the page.

The two sidebars are my navigation, which is why I would like them to be fixed, that way if you scroll to the bottom of the main content, you don't have to scroll back up to get to the navigation, they'll be right there on the sides no matter what.
 
As a heads up to discourage you from what you are attempting to do :) I can't see all your navigations on one screen, hence if I can't scroll down them, I can't reach the bottom of the navigation.

Floating content like this works well in horizontal nav (to an extent) or with very small content

Remember, some people will be on netbooks / mobile etc.
 
why

#container {
height: auto;
margin: 5px auto 0px;
min-height: 850px; <---------------------------------------------------------
width: 1150px; <---------------------------------------------------------------
}

and why set the head and footer outside the container? they need to be inside
 
Renniks, that makes perfect sense, and I had really thought about that.

May I ask what your screen resolution is? Because I the navigation only takes up about half of my screen, so there's plenty of space below it.

Also, this is a personal project that I'm creating so that I have actually have something to manipulate and experiment with as I teach myself web design (or development).

Even if I shouldn't fix the navigation on this site, I would still like to know how for future endeavors with different purposes.
 
@glenwheeler Why? Because I'm learning :)

Actually I had put the min-height there before I put any content on the page, just to get a better idea of what it would look like, and forgot to remove it.

As for the width, I didn't want a skinny site with short lines.

I didn't realize you have to put the header and footer in the container. I thought my header would go at the top regardless, then my container would include my three columns, and then the footer would rest underneath the container at the bottom
 
A container is just that, it contains things, you can put whatever you like in one, and alot of the time they aren't needed at all, but that's another topic altogether.

What you are after is explained in an article as such: Creating always visible div using CSS - Daily Coding - daily coding tips and tricks, C#, .NET, ASP.NET, SQL, always visible div, floating div css, css trick

No idea how good or bad the suggestions are, but there aren't too many css methods of achieving this, so I will gather they are ok. (Currently sorting through about 100 articles, so don't have too much time to be reading code) :) hope it's useful though

EDIT:

Oh and my resolution is 1280 x 800, which is pretty standard for a 15.4" laptop :)
And like I mentioned, some people will be on a lot smaller (my netbook for example has a height of 400px (I can semi modify this and I actually can get it to show faux pixels of 1000+, which I do for general browsing) but shows that being able to scroll is a necessary feature)
 
Thanks for the link. I'm about to look through it right now. I just had an idea real quick of maybe having the navigation fixed the way I want it, but only if the height of the visitor's screen is a certain length. And if their screen is too small, then just have scrollable navigation.
 
That would be a form of progressive enhancement (or graceful degradation - depending which way you built it)

Where you start with the simplest form (just the content) and then enhance it to make more enjoyable (but not necessarily better) experiences

So in your case, start with the content (in this case the navigation), style it to "look" (not behave) how you want, that way you have a working navigation for those without styles and those with
Then add in your behaviour for certain situations :) that way enhancing the experience for those who can experience it, but not harming the experience for those who can't

(graceful degradation is where you start with what you want, then make it work with less than desirable situations, while a more preferable method for a lot of people as that way you code what you want, it is much easier to make mistakes and miss off certain situations, as well as being more personal based rather than user based)
 
Oh good there's a word for my idea, means I'm on the right track lol.

Unfortunately, I think I've come to the conclusion that I have to start from scratch and completely redesign my site. I wanted to implement Wordpress into this site but I realized that it would be better off in the long run to redesign the site around the framework of WP. And of course this leads to a whole slew of fresh questions. But I'll spare you guys at the moment and see how much I can figure out on my own.

Thank you all for being such great help so far. I love this forum.
 
You must log in or register to reply here.
Back
Top