The Forum has been Updated
The code has been upgraded to the latest .NET core version. Please check instructions in the Community Announcements about migrating your account.
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.
This is the CSS to control all of it:
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.<
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.<
نوشته شده در
I did fix this with JavaScript but I would like to know if anyone knows a pure CSS fix for this?<
نوشته شده در
.mainContent .Box1 div, .mainContent .Box2 div, .mainContent .Box3 div { height: 150px; }<
نوشته شده در
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.
<
<
نوشته شده در
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.<
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.<
نوشته شده در
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; }
<
other than that, if you want it strict 150px, but viewer able to see entire text
{ height: 150px; overflow-y: scroll; }
<
