Arrgghhhhhh... Any CSS "experts" around? - GoFuckYourself.com

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

I need all 3 "boxes" to be the same height and it can't be fixed as the content can vary. The "container" doesn't even have a fucking height.

Code:

<div style="width:750px;border:1px solid black;">
<div style="width:520px;float:left;text-align:left;padding:5px;border-right:1px solid black;">
content
</div><div style="width:200px;float:right;text-align:center;">
content
</div>
</div>

Young · 07-30-2007, 09: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, 09:30 PM

Quote:

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, 09:31 PM

So a header and 2 columns?

Tempest · 07-30-2007, 09:36 PM

Quote:

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, 09: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, 09: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, 09: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, 09: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, 10: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, 10: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, 10: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, 10:09 PM

Quote:

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, 10:16 PM

Quote:

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, 10:18 PM

Quote:

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, 10: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, 10: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..

07-30-2007, 08:51 PM	#1
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	Arrgghhhhhh... Any CSS "experts" around? I need all 3 "boxes" to be the same height and it can't be fixed as the content can vary. The "container" doesn't even have a fucking height. Code: <div style="width:750px;border:1px solid black;"> <div style="width:520px;float:left;text-align:left;padding:5px;border-right:1px solid black;"> content </div><div style="width:200px;float:right;text-align:center;"> content </div> </div>

07-30-2007, 09:12 PM	#2
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	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? __________________ ★★★ Last edited by Young; 07-30-2007 at 09:15 PM..

07-30-2007, 09:31 PM	#4
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	So a header and 2 columns? __________________ ★★★

07-30-2007, 09:38 PM	#6
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	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 __________________ ★★★

07-30-2007, 09:42 PM	#7
TheDoc Too lazy to set a custom title Industry Role: Join Date: Jul 2001 Location: Currently Incognito Posts: 13,827	The nav needs position: absolute; Make sure you add at least <br style="clear:both;" /> or another div after the two columns. __________________ ~TheDoc - ICQ7765825 It's all disambiguation

07-30-2007, 09:46 PM	#8
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	Code: body { min-height: 100%; } #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. __________________ ★★★

07-30-2007, 09:55 PM	#9
TheDoc Too lazy to set a custom title Industry Role: Join Date: Jul 2001 Location: Currently Incognito Posts: 13,827	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. __________________ ~TheDoc - ICQ7765825 It's all disambiguation

07-30-2007, 10:01 PM	#10
Young Bland for life Industry Role: Join Date: Nov 2004 Posts: 10,468	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%; } #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 __________________ ★★★ Last edited by Young; 07-30-2007 at 10:02 PM..

07-30-2007, 10:02 PM	#11
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	ok cool... it appears that just using the overflowdden 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).

07-30-2007, 10:03 PM	#12
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	The reason I need the nav column to be the full height is because it's a different background color.

07-30-2007, 10:18 PM	#16
TheDoc Too lazy to set a custom title Industry Role: Join Date: Jul 2001 Location: Currently Incognito Posts: 13,827	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. __________________ ~TheDoc - ICQ7765825 It's all disambiguation

07-30-2007, 10:31 PM	#17
Tempest Too lazy to set a custom title Industry Role: Join Date: May 2004 Location: West Coast, Canada. Posts: 10,217	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..