I would like to set a specific layout for my divs. These divs contain summaries (texts about 500 chars long) and I would like that after the text, on the bottom edge of my boxes, to have a line containing something like Link to additional information : *link*
.
Here's an ascii layout-art for you guys to understand what I mean:
Here is some text blablablablablablablab lablablablablablablablablablablabla gfff ff f blablablablablablablablablablablablabla blablablablablablablablablablablablabla ff f ffff blablablablablablablablablablab lablablablablablablablablablablablablablablablablab ff lablablablablablablablablablablablablab lablablablablablablablablabla blablablablablabla blablablablablabla blablablablablablablabla blablablablablablablabla blablablablablablablabla
Link to additional information here : *link*.
I want the last line to be centered. My layout uses percentage, therefore I cannot use absolute positioning. It should be able to move if the window gets resized.
Here is the CSS of the div:
float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;
EDIT: If forgot to tell, those Divs are DOM elements (aka they are generated everytime the page is loaded) and the link is in a separate tag in the XML file. therefore, if there is something I could do like:
<div class="summarydiv"> summary from xml</div><br>
<div class="centerlink">link line and link from xml</div>
I really like divs because you never know when you may want to style blocks differently, so this is how I would do it:
<div class="parent">
<div>Here is some text........</div>
<div class="link"><a href="#">Link to additional information</a></div>
</div>
And the CSS:
.parent {
position:relative;
float: left;
width: 91.5%;
min-width: 825px;
height: 120px;
text-align: left;
z-index: 1;
border:solid 1px #19365D;
background-image:url('images/NiceBackgroundDude.png');
background-repeat:repeat-x;
margin-left:3.7%;
margin-right:3.7%;
padding-left:0.5%;
padding-right:0.5%;
}
.link {
position:absolute;
width:100%;
bottom:0;
text-align:center;
}
and finally a jsfiddle showing it in action!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With