GoFuckYourself.com - Adult Webmaster Forum - Arrgghhhhhh... Any CSS "experts" around?

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Arrgghhhhhh... Any CSS "experts" around? (https://gfy.com/showthread.php?t=756104)

Tempest

07-30-2007 08:51 PM

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>

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 (Post 12846222)

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 (Post 12846279)

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:hidden 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 (Post 12846383)

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 (Post 12846406)

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 (Post 12846418)

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..

All times are GMT -7. The time now is 06:30 PM.