Arrgghhhhhh... Any CSS "experts" around?

**Young** · 07-30-2007, 08:12 PM

How can they all be the same height but not be fixed at the same time? Not much support for min-height out there.

Maybe I'm just not understanding what you're trying to do. Is this a 3 column layout?

**Tempest** · 07-30-2007, 08:30 PM

Originally posted by Young

How can they all be the same height but not be fixed at the same time? Not much support for min-height out there.

Maybe I'm just not understanding what you're trying to do. Is this a 3 column layout?

2 column... IF I set the container height to a fixed value, then I can set the 2 column heights to 100% and it works (except some browsers slow way down). The problems appears to be that the container doesn't auto set it's height based on the content columns.

**Young** · 07-30-2007, 08:31 PM

So a header and 2 columns?

**Tempest** · 07-30-2007, 08:36 PM

Originally posted by Young

So a header and 2 columns?

Dude.. I posted the exact code.. a container div to set the width and 2 floating divs inside of it.

eg:

Code:

<div class="container">
<div class="content"> <!-- content column floats left -->
</div>
<div class="nav"> <!-- navigation column floats right -->
</div>
</div> <!-- end of container -->

**Young** · 07-30-2007, 08:38 PM

Code:

#wrapper {
     width: 750px;
}

#left {
   width: 500px;
   float: left;
}

#right {
   width: 250px;
   float: left;
}

Code:

<div id = "wrapper">

<div id = "left">

</div>

<div id = "right">

</div>

</div>

I'm tired and there are a zillion different ways to do this.

I could be way off. Thats a simple two column layout. Again. I'd need to see an example to know what you're talking about.

my apologies

**TheDoc** · 07-30-2007, 08:42 PM

The nav needs position: absolute;

Make sure you add at least <br style="clear:both;" /> or another div after the two columns.

**Young** · 07-30-2007, 08:46 PM

Code:

body {
	min-height: 100&#37;;
	}
#wrapper {
         width: 750px;
	 margin-left: 200px;
	 min-height: 100%;
	 overflow:hidden;
}

fixed.

the wrapper should now auto adjust its height depending on the content in left and right.

again. a little tired.

**TheDoc** · 07-30-2007, 08:55 PM

My notes say absolute, but my blog us using relative.. So the absolute is to place a div, so use relative with the float tag.

**Young** · 07-30-2007, 09:01 PM

Shit. Ignore the shit I added to the wrapper

Here goes the full code for a 2 Column Layout with an auto-adjusting wrapper/container.

Code:

<style type="text/css">
body {
	min-height: 100&#37;;
	}
#wrapper {
     width: 750px;
     margin-left: 200px;
     background-color:#000099;
     min-height: 100%;
     overflow:hidden;
}

#left {
   width: 500px;
   float: left;
}

#right {
   width: 250px;
   float: left;
}
</style>


<body>
<div id = "wrapper">

<div id = "left">
left
</div>

<div id = "right">
right
</div>

</div>

created in notepad. tested in firefox

**Tempest** · 07-30-2007, 09:02 PM

ok cool... it appears that just using the overflow

dden made the wrapper take the full height..

But.. and I've tried all sorts of things to set the "height", the navigation div still won't fill the entire height of the wrapper (which gets pushed by the content column).

**Tempest** · 07-30-2007, 09:03 PM

The reason I need the nav column to be the full height is because it's a different background color.

**Young** · 07-30-2007, 09:09 PM

Originally posted by Tempest

The reason I need the nav column to be the full height is because it's a different background color.

just create a tiny background (750px across 3px high) for your wrapper that repeats itself vertically. Include the content and nav colors in this background.

thats the easiest solution.

**Tempest** · 07-30-2007, 09:16 PM

Originally posted by Young

just create a tiny background (750px across 3px high) for your wrapper that repeats itself vertically. Include the content and nav colors in this background.

thats the easiest solution.

Yep.. I realized after I posted I could switch things around and set some backgrounds to get the effect I want.. Thanks.

**Young** · 07-30-2007, 09:18 PM

Originally posted by Tempest

Yep.. I realized after I posted I could switch things around and set some backgrounds to get the effect I want.. Thanks.

No problem. It's not the prettiest solution as far as structure...but it works.

If you want to get to the bottom of this problem for future layouts check out this page.

http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm

I hate using hacks because I still don't have a complete grasp of them. Even just now when I was digging through my completed layouts to find a solution for you I found myself lost in my own code.

Good luck

**TheDoc** · 07-30-2007, 09:18 PM

No easy solution for this, that's for sure. You can use javascript to do it too, but it doesn't work if js is off of course.

**Tempest** · 07-30-2007, 09:31 PM

Well it's lookin all purty now... as long as the content box is higher than the nav box.. LOL... Good enough for now... Thanks guys..

Arrgghhhhhh... Any CSS "experts" around?

Arrgghhhhhh... Any CSS "experts" around?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment