I am trying to make a box dynamic, it is colouring behind some user inputed data, the widths will be the same but the heights will be different and that is the problem. I have tried height:100% in my Stylesheet but it displays all wrong. It will only display any way almost correctly if I give it a fixed heigth like height:120px; Is there a way around this.
How is it displaying "wrong"? I mean if the height is not fixed it should just figure out the height automatically. Perhaps a screendump is needed to illustrate the issue.
I'm looking to get the Read More button on the bottom with no white visible below. The picture heights are all different and so each section should have a different height.
The picture with the Parking sign is almost right, but Cafe Pages has too much white below the Read More. The white background has a fixed height in the Stylesheet:
How do I make a box size dynamic
Hi All
I am trying to make a box dynamic, it is colouring behind some user inputed data, the widths will be the same but the heights will be different and that is the problem. I have tried height:100% in my Stylesheet but it displays all wrong. It will only display any way almost correctly if I give it a fixed heigth like height:120px; Is there a way around this.
Thanks.
Tony
Hi Tony
How is it displaying "wrong"? I mean if the height is not fixed it should just figure out the height automatically. Perhaps a screendump is needed to illustrate the issue.
/Jan
Hi Jan
Here's the dump:
I'm looking to get the Read More button on the bottom with no white visible below. The picture heights are all different and so each section should have a different height.
The picture with the Parking sign is almost right, but Cafe Pages has too much white below the Read More. The white background has a fixed height in the Stylesheet:
.home-page-box {
background:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position:relative;
font-size:inherit;
font-weight:inherit;
color:#444444;
padding:5px 0px 10px 0px;
margin-bottom:8px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);
-moz-box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);
box-shadow: 0px 0px 6px 0px rgba(62, 100, 181, 0.2);
width:220px;;
height:125px;
}
Hi Tony,
You should be able to position the read more button by adding this to your CSS,
.home-page-box {position:relative;
}
And for the read more button then add.
.read-more {position:absolute;
bottom: 0px;
}
You need to extend your current CSS for these elements with this code. Remember to correct the CSS class name for the read more button.
Hope this helps,
/Dennis
Hi Dennis
Sorted!! WOO! HOO!! Thanks! I won't tell you how long I have been at this..... :)
Tony
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.