For my website I have split the page up into rows using CSS(no tables) to get a line to split up the content. As you can see ive just used height:px; for each row to manually move the line. But it jumps all over the place in different browesers. Is there a way to get it to automatically set the border so it appears at the end of the content inside the div?
.row1A
{
height: 600px;
border-bottom: 1px solid white;
}
.row2A
{
height: 820px;
border-bottom: 1px solid white;
}
<div class="row1A">
<div class="column1">
<h2> Bluerock FX-10G</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Bluerock.jpg" alt="Bluerock FX-10G" width="450px" height="325px">
</div>
</div>
<div class="row2A">
<div class="column1">
<h2>Line 6 Spider IV 15W</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Line6Spider.jpg" alt="Line 6 Spider IV" width="350px" height="350px">
</div>
</div>
Please try adding following styles:
.row1A
{
height: auto;
border-bottom: 1px solid white;
clear:both;
}
.row2A
{
height: auto;
border-bottom: 1px solid white;
clear:both;
}
It has been fixed thanks for your help. For some reason when i entered the extra info above the border was at the top of the row not at the bottom. Maybe it was like that anyway just did not make a fuss. But i have now fixed it by removing the border from row 1.
Related
I can't get my images to align correctly between all browsers:
I'm wondering if it's a border issue?
Question: would the best way to resolve this be to create a media query? Right now I sort of try to find a good middle ground, but when viewed on a safari mobile app, those few pixels make a big difference. Or is there a better way to contain the image between the .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 divs?
Here is my relevant HTML:
<div id="officials">
<div class='mnhouse'>
<div class="membersublist">
<div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='housemember' class='lcc_gis_member'></div>
<div id='housedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
<div class='mnsenate'>
<div class="membersublist">
<div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='senatemember' class='lcc_gis_member'></div>
<div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
</div>
And here is my relevant CSS:
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: relative;
top: -56px;
border:none;
}
.membersublist{
margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
height:87px;
background-color: #e6e6e6;
border-top: 1px solid #a7a5a6;
border-right: 1px solid #a7a5a6;
border-bottom: 1px solid #a7a5a6;
border-left: 3px solid #a7a5a6;
}
Here is the demo, in case I miss any relevant code (you need to select a point on the map to open the results).
The issue is your use of negative relative positioning to try to line it up.
#officials img {
...
position: relative;
top: -56px;
...
}
Basically you are positioning it relative to the offset created be the text, which can never be counted upon to be 100% consistent across browsers.
Instead, consider adding positioning to .mnhouse wrapper, and then using absolute positioning to position the images.
.mnhouse {
position: relative;
}
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: absolute;
top: 0;
border:none;
}
The company I work for has been using Flying Saucer for a while. Rencently, they have changed the header format to a complex one that looks like this:
THE COMPANY NAME
_____________________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________
Regrettfully, I can't get it to look like above. THe closes I can get it to look like is where the top line is shorter then the bottom line:
THE COMPANY NAME
____________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________
Here is the code:
#page {
size:letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
padding: 5px;
border-top:#90aac5 solid 1px;
#top-left {content: element(leftHeader);}
#top-center{content: element(centerHeader);}
#top-right {content: element(rightHeader);}
}
#page-thisheader-center {
position:running(centerHeader);
border-bottom:#90aac5 1px solid;
font-size:9px;
height:52px;
color:#7e7f7f;
padding:2px;
}
#page-header-right {
position:running(rightHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
white-space:nowrap;
float:right;
padding-top:5px;
}
#page-header-left {
position:running(leftHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
float:left;
padding-top:5px;
}
.date {
height: 15px;
border-left: #90aac5 solid 1px;
float:right;
width:75px;
The tag looks like this for ids and classes above:
<div id ="page-header-left" align="left">
<div> <xsl:call-template name="get.title"/></div>
</div>
<div id ="page-header-right" align="right">
<div class="date"> <xsl:call-template name="get.date"/></div>
</div>
<div id ="page-thisheader-center">
<div> <xsl:call-template name="get.company.name"/></div>
</div>
I think that is all of it. I hope someone can help. I am totally stumped on how to correct the top line. Thanks!!
UPDATE
The short line is due to the longer titles wrapping. Is there a way to fix the #top-left, #top-center and #top-right margins to a fixed width so the title can wrap without causing the whole header to slide smaller/bigger depending on the title? BTW: I have tried whitespace: nowrap; on the #top-left margin but that just causes the whole header to slide off the right hand side of the page with long titles.
I hope this helps for a solution. Thanks in advance!!
I don't know if it's possible to do what you want using #top-left, #top-center and #top-right. When i try your sample code, I get something like this :
THE COMPANY NAME
____________________________________________________________________
_____ ____
title date
One solution to get what you want would be to use a single #top-center header, containing the three parts of the header.
The #top-center component will span on the full width of the page, and you can layout your
three divs inside it.
For example :
#page {
size: letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
#top-center {content: element(centerHeader);}
}
#page-thisheader-center {
position: running(centerHeader);
}
#company {
border-bottom: #90aac5 1px solid;
text-align:center;
}
#line2 {
border-bottom: #90aac5 1px solid;
}
#article{
float:left;
}
#date {
border-left: #90aac5 solid 1px;
margin-left: 6in;
}
And :
<div id="page-thisheader-center">
<div id="company">THE COMPANY NAME</div>
<div id="line2">
<div id="article">Name of the article</div>
<div id="date">Date : 04/07/2013</div>
</div>
</div>
I am new to coding HTML/CSS but I have a pretty good grasp so far. I have spent the last few hours trying to get my code side by side but it always remains stacked. My code is
<div class="api" style="float:left;">
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
And my CSS is,
.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
If you tell me what I am missing in order to get the info displayed side by side I would greatly appreciate it. If you have any other code cleanups that you can point out that would be great also but not needed.
EDIT:
Thank you for all your help guys, I have tried both Watson and Pete's answers but sadly they are not working. I took some screenshots of what it is without your code and with your code. You can find them here, https://dl.dropbox.com/u/11217802/sidebyside.png
I have also been able to get it working but I am trying to avoid as much inline styling as possible and I believe that I have pointless tags and way too many <div> for this small project.
<div class="api">
<div>
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:100%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
</td>
</div>
<div style="float: left;">
<div class="appbrain-app">
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
As far as the CSS, that did not change from what I posted orginally.
Thanks again Grady
try this:
.api a, .api div, .api img {
float: left;
}
and a tip: you should indent your code, so the child nodes are inside the parent nodes, like:
<div>
<a>Example</a>
<img>
<div>
<a>Example</a>
</div>
</div>
sibling nodes (when one tag is not inside another) should be indented the same amount.
looking at your code you have only floated the containing div, all the divs inside it are still block elements, if you want these to be side by side, you can do one of the following:
change them to inline elements .api div {display:inline;}
change them to inline-block elements .api div {display:inline-block;}
float them left .api div {float:left;}
EDIT
Having looked at your edit and tried your code in jsfiddle, the problem is the javascript is creating a lot of extra divs. I have changed your code layout to get things side by side:
http://jsfiddle.net/xFu4Z/1/
html
<div class="api">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play" />
</div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
CSS
.api,
.appbrain-app {float:left;}
Please note that you will need to make sure the widths of .api and .appbrain-app added together don't exceed the width of the container they are in - I just noticed that on your original styles you have set a max-width of 700px which means that it is probably going to push the .appbrain-app div down a line
I restructured your markup:
<style>.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
min-width: 300px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
.appbrain-app { float: right; width: 48%; border: 1px solid red; }
</style>
<div class="api" style="float:left;">
<div>
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
Problem:
I am trying to create a multi-column CSS layout with borders that look something in line with this picture:
Code:
<div style="border-radius:4px; border: 1px solid #ddd;">
<div style="display:block;float:left;width:50%;">
<div><b>Författare:</b> '.$authors.'<br></div>
<b>Handledare:</b> '.$row['Supervisor'].'<br>
<b>Examinator:</b> '.$row['Examiner'].'<br>
<b>Design av studie:</b> '.$design.'
</div>
<div style="display:block;float:left;width:50%;">
<b>Examinationsdatum:</b> '.$row['ExaminationDate'].'<br>
<b>Nivå:</b> '.$level.' ('.$credits.')<br>
<b>Kommentar:</b> '.$row['Comments'].'<br>
<b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser
</div>
</div>
The above-mentioned code will produce the following:
Question:
What needs to be modified so I can get the horizontal and vertical lines to the box?
You can modify the CSS to look like this:
.row {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.left {
display: inline-block;
width: 50%;
border-right: 1px solid #ddd;
}
.right {
display: inline-block;
width: 49%;
border-left: 1px solid #ddd;
margin-left: -1px;
}
.top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.outerBox {
margin: 10px;
}
Then have your markup look like this:
<div class="outerBox">
<div class="row top">
<span class="left"><b>Författare:</b> '.$authors.'</span><span class="right"><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</span>
</div>
<div class="row">
<span class="left"><b>Handledare:</b> '.$row['Supervisor'].'</span><span class="right"><b>Nivå:</b> '.$level.' ('.$credits.')</span>
</div>
<div class="row">
<span class="left"><b>Examinator:</b> '.$row['Examiner'].'</span><span class="right"><b>Kommentar:</b> '.$row['Comments'].'</span>
</div>
<div class="row bottom">
<span class="left"><b>Design av studie:</b> '.$design.'</span><span class="right"><b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</span>
</div>
</div>
CAVEAT: The formatting will break if you put a space between the spans on an individual line, so don't break them; otherwise, take this solution and work out something that doesn't break =)
You can see a working example at http://jsfiddle.net/saluce/XhnBE/
EDIT: It seems that mPDF doesn't like inline-block, so change this part of your CSS:
.left {
display: block;
float: left;
width: 50%;
border-right: 1px solid #ddd;
}
http://jsfiddle.net/saluce/XhnBE/1/
You could use two lists side by side:
<div style="border-radius:4px; border: 1px solid #ddd;">
<ul style="display:block;float:left;width:50%;">
<li><b>Författare:</b> '.$authors.'</li>
<li><b>Handledare:</b> '.$row['Supervisor'].'</li>
<li><b>Examinator:</b> '.$row['Examiner'].'</li>
<li><b>Design av studie:</b> '.$design.'</li>
</ul>
<ul style="display:block;float:left;width:50%;">
<li><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</li>
<li><b>Nivå:</b> '.$level.' ('.$credits.')</li>
<li><b>Kommentar:</b> '.$row['Comments'].'</li>
<li><b>Övrigt:</b> '.$row['Participants'].' deltagare, '.$row['Reference'].' referenser</li>
</ul>
</div>
You'll need to add some styles to get rid of the default styles for lists and add you borders to the top, bottom and sides of your lis .
A down side of this is that you'll have to give your lis fixed heights so the borders line up.
You have to change your marke-up. You need a table or more boxes to do this. I think tables would be easier to manage... and somehow this is a case tables are for.
Or you take a bg-image... but I won't recommend this
Check this: http://jsfiddle.net/eNEzs/
It's enough to correct your css a little bit and wrapp items in div's.
<div style="border-radius:4px; border: 1px solid #ddd; margin: 20px;">
<div class="block">
<div><b>Författare:</b> '.$authors.'</div>
<div><b>Handledare:</b> '.$row['Supervisor'].'</div>
<div><b>Examinator:</b> '.$row['Examiner'].'</div>
<div><b>Design av studie:</b> '.$design.'</div>
</div>
<div class="block">
<div><b>Examinationsdatum:</b> '.$row['ExaminationDate'].'</div>
<div><b>Nivå:</b> '.$level.' ('.$credits.')</div>
<div><b>Kommentar:</b> '.$row['Comments'].'</div>
<div><b>Övrigt:</b> '.$row['Participants'].</div>
</div>
<div style="clear:both"></div>
</div>
CSS
.block {
display:block;
float:left;
width:50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block:first-child {
border-right: 1px solid #ddd;
}
.block div {
border-bottom: 1px solid #ddd;
}
.block div:last-child {
border-bottom: 0px;
}
But I would recommend you to simply change elements to a table or list (ul or ol). Above solution is simply for this particular exmaple.
Wrap each cell in a div instead of using br, and add border-left and border-bottom on the appropriate element. If you still want to use 50% width, then use box-sizing: border-box; to keep it from wrapping.
See this jsfiddle for one way to do it, though you should use classes to properly select which elements to apply the different styles to.
I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:
<div id="#outer" style="width:100%; border:1px">
<div id="#inner1" style="border:1px; display:inline">
inner div 1. Some text...
</div>
<div id="#inner2" style="width:100%????; border:1px; display:inline">
inner div 2...
</div>
</div>
Question is how to make #inner2 div to get rest of the horizontal space if width of the #inner1 div is not specified and depends on what it is inside?
P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.
I want result to work in IE7+ and FF 3.6
In more details for me it looks like this:
<style type="text/css">
.captionText
{
float:left;
}
.captionLine
{
height: 1px;
background-color:black;
margin: 0px;
margin-left: 5px;
margin-top: 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
Here is the image of what I want:
The mysterious overflow: hidden; is your friend here. It stops elements adjacent to floats from extending behind the float — I think that’s the layout you’re looking for.
Here’s some slightly edited HTML: I don’t think you can have # characters in your ids:
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
And here’s the CSS to achieve the layout you want.
(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn’t actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out there...)
<style type="text/css">
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
/* Colours and borders for illustration purposes */
border: solid 3px #666;
background: #ddd;
}
#inner1 {
float: left;/* Make this div as wide as its contents */
/* Colours and borders for illustration purposes */
border: solid 3px #c00;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
/* Colours and borders for illustration purposes */
border: solid 3px #00c;
background: #ddf;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}
#inner1 {
margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->
Tested and working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.
If you're reading this now you can probably use calc, so be thankful.
HTML
<div class="universe">
<div class="somewidth">
</div>
<div class="everythingelse">
</div>
</div>
CSS
.universe {
width: 100%;
height: 100%;
}
.somewidth {
width: 200px;
height: 100%;
}
.everythingelse {
width: 800px; /* fallback for emergencies */
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
height: 100%;
}
See the working example on JSFiddle.
You would need to float the inner1 div to the left, like so:
<div id="#outer" ....>
<div id='#inner1" style="float:left; border: 1px solid #000;">
blabla
</div>
<div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
gnihihi
</div>
</div>
This should do the trick. Check it out!
bye
You do not need to use div for nested element, just use SPAN like this
<div>
<span style="display:inline-block;width: auto;border: solid 1px black;">
hey you
</span>
<span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
always use proper tools.
</span>
</div>
Expanding on #Nasser Hajloo's answer, this works for me (even in IE6)
<div style="width: 400px; border: solid 1px red;">
<span style="float:left;width: auto;border: solid 1px black;">
hey you
</span>
<div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div>
</div>
Try it with the main div smaller than 400px to see how it adjusts. (It also works with divs rather than spans - the key is the width: auto in the first div/span.)
Try this: nest inner1 inside inner2, and remove the display:inline from inner2, like this:
<div id="#outer" style="width:100%; border:1px solid red">
<div id="#inner2" style="width:100%; border:1px solid black;">
<div id="#inner1" style="border:1px solid blue; display:inline">
inner div 1. Some text...
</div>
inner div 2...
</div>
</div>
You can see it working here: http://jsbin.com/adiwi
From your code it looks like you are trying to get a horizontal line to fill the empty space in your div. If I'm correct your looking to create a visual effect with markup. Correct me if I'm wrong.
(Would be nice to see an image of what you want)
Example:
Title ---------------------------
or
Title: Caption ------------------
This is not best practice. You should try to get this effect with CSS.
Try making your code more semantic first:
<div id="#outer" style="width:100%; border:1px">
<h3 style="border:1px; display:inline">
Caption
</h3>
</div>
To get the line:
create an image with the color you
want
make its height the same that you
want the line to be in px
position it with the background
property
.
#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}
#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}
Your first problem is that you are prefixing your ids with a '#'. The # is only used in CSS to refer to the element with that id, e.g. the CSS rule #outer{width:100%} refers to your element:
<div id="outer"></div>
Also you don't need to use width's on div's (or any other block elements) that aren't floated, as they already automatically take up 100% of the available width.
If you want to the 2 DIVs to appear on the same line you have to float the first one to the left. The adjacent DIV will then appear on the side, again you don't need to sepecify widthd for the second element. Here is your complete example including a different coloured border for each div.
I've made the borders bigger so you can see clearer whats going on.
<html><body>
<style type="text/css">
#outer {
border: solid 5px #c00;
}
#inner1 {
border: solid 5px #0c0;
float: left;
width: 200px;
height: 300px;
}
#inner2 {
border: solid 5px #00c;
height: 300px;
margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
</body></html>
Another solution is to run a javascript which resizes the captionLine class when document has loaded like this.
Took some time to get it working under IE8, have not tried IE7 but should work.
2 things to note.
IE does not support getElementsByClassName, therefor this function is rewritten.
IE handles margins differently when objects are resized and moved with style.marginLeft, somehow IE seems to keep the margin in the class declaration and adds this to the new style.margin.
<body onload="resizeCaptionLine()">
<style>
caption {
border: 1px solid blue;
padding: 0px;
}
.captionText {
border: 1px solid red;
float: left;
}
.captionLine {
background-color:black;
margin: 0px;
margin: 5px 0px 0px 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%" name="caption1">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<script type="text/javascript">
function getElementsByClassName(node, class_name) {
elems = node.all || node.getElementsByTagName('*');
var arr = new Array();
for(j = 0; j < elems.length; j++)
{
if (elems[j].className == class_name)
arr[arr.length] = elems[j];
}
return arr;
}
function resizeCaptionLine()
{
var elems = getElementsByClassName(document, 'captionLine');
for(i = 0; i < elems.length ; i++)
{
var parent = elems[i].parentNode;
var sibling = getElementsByClassName(parent, 'captionText');
var width = parent.offsetWidth - sibling[0].offsetWidth;
if(elems[i].currentStyle)
{
var currentMargin = elems[i].currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
else if (document.defaultView && document.defaultView.getComputedStyle)
{
var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
var currentMargin = currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
}
else
{
var currentMargin = elems[i].style.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
elems[i].style.width = (width - margin)+"px";
}
}
</script>
</body>
Answer is really simple! If you have fixed div (menu) on the left side, then give fixed div float: left and your right flexible div margin-left that is bigger then width of first fixed div.