I have the following code;
<div>
<div style="width: 200px; float: right; text-align: center;">This div element should be positioned in the top right corner of containing div element. It should protrude out of the bottom of the containing div element. It should protrude out of the containing div element and be displayed as over the table below. The table below should align itself with the main div element.</div>
This text should be aligned to the left.
</div>
<table>
<tr>
<td width="30%" class="input_title">Premises/Building name:</td>
<td width="70%">{VAR:name}</td>
</tr>
</table>
I have attached a gif to further illustrate the effect I would like to achieve.
Any help or advice is much appreciated.Something like this?
<style type="text/css">
#container {
padding: 3px 3px 20px 3px;
margin-bottom: 3px;
width: 600px;
border: 1px solid #000;
position: relative;
}
#child {
position: absolute;
top: 3px;
right: 3px;
padding: 5px;
width: 175px;
font-size: 85%;
text-align: justify;
border: 1px solid #000;
background-color: #fff;
}
#the_table {
width: 608px;
height: 200px;
border: 1px solid #000;
}
#the_table td {
vertical-align: top;
}
</style>
<div id="container">
<div id="child">This div element should be positioned in the top right corner of containing div element. It should
protrude out of the bottom of the containing div element. It should protrude out of the containing div
element and be displayed as over the table below. The table below should align itself with the main div
element.</div>
This text should be aligned to the left.
</div>
<table id="the_table">
<tr>
<td width="30%" class="input_title">Premises/Building name:</td>
<td width="70%">{VAR:name}</td>
</tr>
</table>Great. Thanks for your help.
Just one more question. Is there any reason you use the "ID" attribute rather than the "class" attribute?Sorry one more question. Currently the child div element inherits bold font setting of the container div element. Is there any way I can stop it from doing this? I want the container div element text to be bold and the child div element text to be regular. In fact I dont want the child to inherit any of the container's styling.Originally posted by wastlinger
Great. Thanks for your help.
Just one more question. Is there any reason you use the "ID" attribute rather than the "class" attribute?
Since, in the example, there was only one child element, only one container, and only one table, it made sense to use IDs rather than classes, since they would be used only once (using classes is perfectly acceptable; it's mainly a matter of preference) -- however, if you needed that same example used many times on the same page, then you would use classes, as classes can be applied as many times as you want, whereas IDs can only be applied one.
Originally posted by wastlinger
Sorry one more question. Currently the child div element inherits bold font setting of the container div element. Is there any way I can stop it from doing this? I want the container div element text to be bold and the child div element text to be regular. In fact I dont want the child to inherit any of the container's styling.
The easiest way would be to explicitly set those properties for the child element. So if you had font-weight: bold; applied to the parent element and you didn't want the child to inherit it, then you'd set font-weight: normal; in the child's styles.Thanks again. All working perfectly now as described by you.Good, good. Glad I could help.
<div>
<div style="width: 200px; float: right; text-align: center;">This div element should be positioned in the top right corner of containing div element. It should protrude out of the bottom of the containing div element. It should protrude out of the containing div element and be displayed as over the table below. The table below should align itself with the main div element.</div>
This text should be aligned to the left.
</div>
<table>
<tr>
<td width="30%" class="input_title">Premises/Building name:</td>
<td width="70%">{VAR:name}</td>
</tr>
</table>
I have attached a gif to further illustrate the effect I would like to achieve.
Any help or advice is much appreciated.Something like this?
<style type="text/css">
#container {
padding: 3px 3px 20px 3px;
margin-bottom: 3px;
width: 600px;
border: 1px solid #000;
position: relative;
}
#child {
position: absolute;
top: 3px;
right: 3px;
padding: 5px;
width: 175px;
font-size: 85%;
text-align: justify;
border: 1px solid #000;
background-color: #fff;
}
#the_table {
width: 608px;
height: 200px;
border: 1px solid #000;
}
#the_table td {
vertical-align: top;
}
</style>
<div id="container">
<div id="child">This div element should be positioned in the top right corner of containing div element. It should
protrude out of the bottom of the containing div element. It should protrude out of the containing div
element and be displayed as over the table below. The table below should align itself with the main div
element.</div>
This text should be aligned to the left.
</div>
<table id="the_table">
<tr>
<td width="30%" class="input_title">Premises/Building name:</td>
<td width="70%">{VAR:name}</td>
</tr>
</table>Great. Thanks for your help.
Just one more question. Is there any reason you use the "ID" attribute rather than the "class" attribute?Sorry one more question. Currently the child div element inherits bold font setting of the container div element. Is there any way I can stop it from doing this? I want the container div element text to be bold and the child div element text to be regular. In fact I dont want the child to inherit any of the container's styling.Originally posted by wastlinger
Great. Thanks for your help.
Just one more question. Is there any reason you use the "ID" attribute rather than the "class" attribute?
Since, in the example, there was only one child element, only one container, and only one table, it made sense to use IDs rather than classes, since they would be used only once (using classes is perfectly acceptable; it's mainly a matter of preference) -- however, if you needed that same example used many times on the same page, then you would use classes, as classes can be applied as many times as you want, whereas IDs can only be applied one.
Originally posted by wastlinger
Sorry one more question. Currently the child div element inherits bold font setting of the container div element. Is there any way I can stop it from doing this? I want the container div element text to be bold and the child div element text to be regular. In fact I dont want the child to inherit any of the container's styling.
The easiest way would be to explicitly set those properties for the child element. So if you had font-weight: bold; applied to the parent element and you didn't want the child to inherit it, then you'd set font-weight: normal; in the child's styles.Thanks again. All working perfectly now as described by you.Good, good. Glad I could help.