Another CSS Question

Snitz™ Forums 2000
https://forum.snitz.com/forumTopic/Posts/68255?pagenum=1
05 November 2025, 09:00

Topic

JJenson
Another CSS Question
18 February 2009, 13:11


Ok I have been getting really good with the whole DIV/CSS thing but I have one issue I can never seem to get around so I want to see if any of you have run into this:

I have a container div that has 3 divs inside of it.

Code:

<div class="mainContent">
  <div class="Box1">
    <div id="content">
    	<h6>INTRODUCING NEWS ON HOLD</h6>
        consectetur adipiscing elit. Curabitur sed neque. Nam fringilla, sapien et tempus sollicitudin, eros erat faucibus libero, sit amet faucibus odio magna vulputate pede.
    </div>
  </div>
  <div class="Box2">
    <div id="content_2">
    	<h6>WHAT WE DO</h6>
        consectetur adipiscing elit. Curabitur sed neque. Nam fringilla, sapien et tempus sollicitudin, eros erat faucibus libero, sit amet faucibus odio magna vulputate pede.    </div>
  </div>
  <div class="Box3">
    <div id="content_3">
    	<h6>BOTTOM LINE</h6>
        consectetur adipiscing elit. Curabitur sed neque. Nam fringilla, sapien et tempus sollicitudin, eros erat faucibus libero, sit amet faucibus odio magna vulputate pede.    </div>
  </div>
  <div style="clear:both;"></div>
</div>

This is the CSS to control all of it:

Code:

.mainContent { position: relative; width: 715px; margin: 10px auto 70px; }

.mainContent .Box1 { position: relative; height: 100%; float: left; width: 200px; border: 1px solid #0092CF; }
.mainContent .Box1 #content { padding: 10px 15px; }
.mainContent .Box1 #content h6 { font-size: 11px; margin: 0px 0px 5px; }

.mainContent .Box2 { position: relative; height: 100%; float: left; width: 265px; margin: 0px 0px 0px 20px; border: 1px solid #0092CF; }
.mainContent .Box2 #content_2 { padding: 10px 15px; }
.mainContent .Box2 #content_2 h6 { font-size: 11px; margin: 0px 0px 5px; }

.mainContent .Box3 { position: relative; height: 100%; float: left; width: 204px; margin: 0px 0px 0px 20px; border: 1px solid #0092CF; }
.mainContent .Box3 #content_3 { padding: 10px 15px; }
.mainContent .Box3 #content_3 h6 { font-size: 11px; margin: 0px 0px 5px; }


I basically have tried to set the height of the container div to 150px which then makes the heights right for the filler text. But this is a cms site they need to be able to add text to any box and the container div needs to grow to the right size.
The problem is I cannot seem to make all 3 divs inside the container the same height.
I know i can do this in tables and worse comes to worse I will do this one thing in it. But I want to know if there is a DIV/CSS solution so I can learn it.
Thanks for the input.<

 

Replies ...

JJenson
18 February 2009, 13:43


I did fix this with JavaScript but I would like to know if anyone knows a pure CSS fix for this?<
SiSL
18 February 2009, 13:44


.mainContent .Box1 div, .mainContent .Box2 div, .mainContent .Box3 div { height: 150px; }<
JJenson
18 February 2009, 14:01


But that will not grow so they will always be the same height. So if someone puts in 1000 words into the first div the second div needs to stretch to be the same length.
<
MaD2ko0l
18 February 2009, 14:20


have you had a look at the "overflow" function...
i think thats what its called. im sure i used it somwhere to filter out longwords or images that was larger than a certain box.<
SiSL
18 February 2009, 14:45


From what you told, I understand, you want other divs to enlarge, if one of them has enlarged too... That would be only made by tables mate, it is not CSS's duty to check different div's heights.

other than that, if you want it strict 150px, but viewer able to see entire text

{ height: 150px; overflow-y: scroll; }

<
AnonJr
18 February 2009, 14:55


It can be done via CSS, but its a major PITA - you may want to check over at www.alistapart.com as I seem to remember them having an article or two over the summer on that very subject. More often than not there's a little JavaScript thrown in the mix to tie it all together. Tables (used properly) do make some of this a lot easier. I do get the whole "semantics" bit that you seem to read everywhere, but I just don't get why its such a religious quest to rid the world of table-based layouts. But that's another discussion for another day...
You may also want to look at some of the CSS frameworks that are out there to see if it wouldn't make life a little easier. www.sitepoint.com had an article on them recently.<
Shaggy
18 February 2009, 15:01


Float the containing div (mainContent) and give it a min-height of 150px.
<
Shaggy
18 February 2009, 15:13


Sorry, meant to say to give each of the child divs the min-height not the the parent.
<
JJenson
18 February 2009, 16:53


Yeah I did that but they don't all grow together that way. I have javascript that makes it work but I just wanted to know if there was a CSS solution.

I am not against tables by any means at all. But at the same time I have only used tables and I want to learn div based layouts better so I can be quicker at them so I am just trying everything is all. I can do pretty much everything else I need but multiple columns same height.<
SiSL
18 February 2009, 18:12


That's not possible JJenson that the two divs change their height according to one other's height unless DHTML/Javascript feed. Divs does not work like tables and both have their respective ways where to use one or the other... You have just recieved one step: If you want an aligned/same scalable parts, that's table's job...<
JJenson
18 February 2009, 20:50


SISL I understand how tables and div's work. But there are work arounds and hacks all over to make things work. I was just seeing if someone knew of any work around for div's. I already said I have javascript that will do this but wanted to ask if there was a CSS way of doing this same thing.
But I will say it is a pretty sweet script that pretty much makes all divs the same height you specify. If anyone is interested let me know I will point you to it. only takes 1 js file and 1 call on the body tag.
Anyways thanks for the suggestions. I can make the divs all the same height to a certain point but then if 1 div grows beyond that certain point it just doesn't seem to want to play. Anyways thanks for the suggestions seems like JavaScript is the way to go for this one.<
Shaggy
19 February 2009, 04:43


See, that's why I don't post here late at night, I misread everything!
JavaScript is one way to do it, yes, but it's far from ideal. A pure-CSS way to do it would be to apply a background image to the parent div that tiles vertically and incorporates the background of the child divs.
<edit>Here's a very simple example to illustrate how you would do it. No JS, just CSS and images</edit>

<edit2>SiSL, tables should not be used to lay things out in columns, they should only be used to display information that should be tabulated.</edit2>

<
JJenson
19 February 2009, 09:59


I actually figured out a where I did it this way as well:

<div1>top images with 2 columns</div>
<div2>Repeated Background image with 2 internal divs to lay it out</div>
<div>Bottom Image to close table off.</div>

I think that is basically what you are saying. Its pure CSS and DIV's its worked around a different way but none the less works just like it is supposed to. I have been playing around with pure divs and css and I have been loving what I have learned the only 2 issues I ever find is this one and having something at the bottom of the screen if there is not enough content to fill up the window and have it stay below window but at the bottom after you scroll if there is alot of content/

Anyways thanks Shaggy of the idea :)<
© 2000-2021 Snitz™ Communications