CSS positioning help needed

[kam]

Thanks to any and all who looked on the title and took pity on me :oops:

I’m having basic newbie problems trying to get 2 columns line up side by side. I’ve set up the basic problem on an active webpage at http://www.kevinmeek.ca/Test/index.html. I tried attaching the files but I wasn’t allowed due to extensions issues. Sorry!. :?

I want my left side bar to stick to the left of my pagewrap (I’m trying to use Chris’ phrases here) and have the content fill everything to the right of the side bar. If the content is smaller (height-wise) than the side bar then the pagewrap should extend to the bottom of the side bar and still contain the content. If the content is larger than the side bar then the pagewrap should extend to the bottom of the content and encase the side bar but not write under it. Things will also be centered (width-wise) in the middle of the right-side area, so that might be a concern.

It’s probably very simple, but I’m just not getting it. My content always seems to either go under the sidebar or the pagewrap shrinks to the smaller content and the sidebar sticks out of the bottom of the pagewrap. Does anyone have any ideas?

Thanks,
Kevin
PS. As a sidenote: Is there anyway to center the pagewrap within the body?

[TheDoc]

Fortunately you are three simple steps away!

1. Add the following CSS to your left side bar:

Code:

float:left; /* Floats your content to the left */

2. Add the following CSS to your main content:

Code:

float:right; /* Floats your content to the right */
width:650px; /* Needed for the float to work */

3. Add the following CSS to your pagewrap:

Code:

margin: 0 auto; /* This will center your wrapper in the browser. It’s saying, “top and bottom margin equals zero, left and right margin automatically adjust” */

[kam]

Man, The Doctor is in the house. Thanks, that works great now. But can you answer some questions as to where I screwed up?

1) I thought that if 2 divs were within 1 relative div and they were both set to ‘float: left’ then they would line up where the first div would be leftmost and the second div would be attached to the right side of the second div. That didn’t happen here, why not? Which is, I believe, why you suggested a float: right.

2) You suggested to put ‘float: left’ in the leftsidebar CSS. But since that div is in the main div doesn’t it just cascade down from the larger div to the div below?

3) In the float: right you suggested to set to 650 px (650+250=900px) – wouldn’t width: auto say "I’m in this big div and 250px is taken up beside me that means that I would have to set myself to 650 automatically"? Why not?

Thanks for everything Doc, bang on,
Kevin

[MesmerLab]

Floats are kind of wonky when used in actual layout. I believe they were invented to help wrap text around images, or rather, insert an image within a body of text.

So when using them for a layout, you definitely want a width on each of them. If the sum of your floats’ widths is more than their container, the second one will be pushed down below the first one. And the sum also includes any padding and margins. And you should check your layout in every browser. But once the floats are correct and the framework is done, you shouldn’t have any problems with it. Just keep in mind that if you increase horizontal padding on one of the floated divs that you have to decrease width appropriately, or it will break out and be shoved below.

1) I’ve never really found a benefit for using both float:left and float:right in a layout situation. I always just use float:left on both.

2) putting float:left on your sidebar will do nothing visually if that’s the only div within your wrapper….but add a 2nd div and you’ll quickly see the benefit

If you float something, it will basically fall in line horizontally instead of vertically, as long as it can fit within the container.

3) I think you might rip the space/time continuum if you put a width of auto onto a float. I’ve never tried it, being afraid of the possible results. :shock:

[nomyiw]

This was a big help for me too. I didn’t realize you needed to have a set width in both floating div’s, so THank you!

I do need a little help on my side bar.

This is what it is now:
http://precisionshapes.net/new.html

And I want the sidebar div to continue its column down the full length of the page like in my mock up:
http://precisionshapes.net/web2.2.png

Thanks in advance for your help!

[Author]

Posts