FRIHOSTFORUMSFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

Fixing CSS

 


AOP Web Development
I to all i would like to ask to those css gurus, coz i'm not a very good in css. So that is why i need your expertise

basically what i want is i have container div that height is around ex. 200 pixels now if the content are too small the div height would be as is.

Code:

<html>
<head>
<body>
<div style="border:1px solid #101010;">
<div style="height:200px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dui. Nullam pede. Vivamus vehicula, risus eget vestibulum volutpat, nunc ante
</p>

</div>
</div>
</body>
</html>



You see this sample code.

Now if i would have a long content of data.

what i want is iwant my container div to be flexible as the border will cover the whole data it will not supposed to overlay the border



Code:

<html>
<head>
<body>
<div style="border:1px solid #101010;">
<div style="height:200px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu dui. Nullam pede. Vivamus vehicula, risus eget vestibulum volutpat, nunc ante

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae tortor. Pellentesque ac odio. Integer lorem orci, facilisis ut, volutpat a, viverra a, pede. Fusce nec ligula sodales mauris elementum scelerisque. Mauris feugiat blandit magna. Curabitur fringilla mauris non justo. Aenean nisl massa, convallis rhoncus, aliquam vel, mattis non, libero. Ut eros magna, fermentum feugiat, placerat quis, sodales sed, quam. Nulla ac velit. Aenean sed est. Duis eget tortor. Quisque vestibulum iaculis lacus.

Vivamus non dolor. Fusce egestas fringilla mauris. Etiam sit amet augue. Curabitur porttitor, nulla et aliquet scelerisque, lorem lacus tincidunt ante, a interdum massa lacus at nulla. Cras ut lectus. Nulla dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam consequat ornare dui. Sed sapien mauris, malesuada nec, varius et, condimentum egestas, dolor. Duis vitae turpis non augue ultricies eleifend. Aenean feugiat, diam ut luctus ultrices, elit turpis molestie eros, vel aliquam ipsum orci sed lectus. Pellentesque lorem diam, mollis in, auctor ac, varius vel, arcu. Sed faucibus urna ac dui. Cras erat neque, scelerisque a, commodo eget, pulvinar eu, enim.

Nulla eleifend dui egestas ante. Etiam vehicula orci quis leo. Cras mollis risus et massa. Nam ipsum mi, luctus vitae, feugiat vitae, feugiat nec, diam. Mauris vel leo ut leo consectetuer sollicitudin. Vestibulum sed erat. Aenean fringilla, arcu in mattis egestas, mauris est porta ligula, eu ultricies metus augue vestibulum lectus. Pellentesque mi nibh, sodales non, pretium tristique, porta sit amet, risus. Etiam pulvinar, urna sit amet tincidunt interdum, erat nunc bibendum dui, et imperdiet purus metus commodo orci. Pellentesque non sem vitae odio facilisis tincidunt. In faucibus. Donec felis risus, pellentesque non, tincidunt ut, tempus in, pede. Vivamus vitae urna a mi varius accumsan. Praesent egestas lorem quis turpis. Aliquam accumsan pharetra lacus. Curabitur facilisis arcu quis tortor. Donec varius, eros in pulvinar ornare, tortor justo auctor metus, et accumsan augue elit egestas nulla. Cras dolor ipsum, porta id, sollicitudin nec, ornare eget, massa. Aliquam sed felis.

</p>

</div>
</div>
</body>
</html>



Something like that.. can you suggest me how will this things fixed up.
Hope you can help me with this.
alalex
Well if you want to have a minimum height and then if the text expands have the div expand you can use the following css:
Code:
div#layer{
     min-height:200px;
}

    Change the selector (div#layer) so that it is applied to your div, right now it is applied to divs with id="layer", just in case.

You can also use min-width, max-height and max-width. (You can probably guess what they do...)
Luck Wink
snowboardalliance
alalex wrote:
Well if you want to have a minimum height and then if the text expands have the div expand you can use the following css:
Code:
div#layer{
     min-height:200px;
}

    Change the selector (div#layer) so that it is applied to your div, right now it is applied to divs with id="layer", just in case.

You can also use min-width, max-height and max-width. (You can probably guess what they do...)
Luck Wink


It won't work with older IE (6) as far as I remember.
AOP Web Development
thanks dude.. i will try to get it.
AOP Web Development
Nice job, i found it very useful

regarding the IE Problem i found this thing

all you need is

min-height:500px;
height: auto !important;
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.