Another CSS Question - Posted (2223 Views)
JJenson
Advanced Member
JJenson
Posts: 2121
2121
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.<
 Sort direction, for dates DESC means newest first  
 Page size 
Posted
JJenson
Advanced Member
JJenson
Posts: 2121
2121
I did fix this with JavaScript but I would like to know if anyone knows a pure CSS fix for this?<
Posted
SiSL
Average Member
SiSL
Posts: 671
671
.mainContent .Box1 div, .mainContent .Box2 div, .mainContent .Box3 div { height: 150px; }<
CHIP Online Forum
My Mods Select All Code | Fix a vulnerability for your private messages | Avatar Categories W/ Avatar Gallery Mod | Complaint Manager Admin Level Revisited | Merge Forums | No More Nested Quotes Mod
Posted
JJenson
Advanced Member
JJenson
Posts: 2121
2121
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.
<
Posted
MaD2ko0l
Senior Member
MaD2ko0l
Posts: 1053
1053
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.<
© 1999-2010 MaD2ko0l
Posted
SiSL
Average Member
SiSL
Posts: 671
671
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; }

<
CHIP Online Forum
My Mods Select All Code | Fix a vulnerability for your private messages | Avatar Categories W/ Avatar Gallery Mod | Complaint Manager Admin Level Revisited | Merge Forums | No More Nested Quotes Mod
Last edited by SiSL on 18 February 2009, 14:51
Posted
AnonJr
Forum Moderator
AnonJr
Posts: 5768
5768
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.<
Last edited by AnonJr on 18 February 2009, 14:56
Posted
Shaggy
Support Moderator
Shaggy
Posts: 6780
6780
Float the containing div (mainContent) and give it a min-height of 150px.
<
Search is your friend “I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.”
Posted
Shaggy
Support Moderator
Shaggy
Posts: 6780
6780
Sorry, meant to say to give each of the child divs the min-height not the the parent.
<
Search is your friend “I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.”
Posted
JJenson
Advanced Member
JJenson
Posts: 2121
2121
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.<
Posted
SiSL
Average Member
SiSL
Posts: 671
671
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...<
CHIP Online Forum
My Mods Select All Code | Fix a vulnerability for your private messages | Avatar Categories W/ Avatar Gallery Mod | Complaint Manager Admin Level Revisited | Merge Forums | No More Nested Quotes Mod
You Must enter a message